update hideOrUnhideAllChildren to hide portals that aren't wrapped in a host component (#16992)
Currently, when a node suspends, if its subtree contains a portal, the portal is not hidden. This hides portals in the subtree when it's not wrapped in a host component .
This commit is contained in:
parent
bb680a0905
commit
de2edc268d
|
@ -104,6 +104,29 @@ describe('ReactDOMSuspensePlaceholder', () => {
|
|||
expect(window.getComputedStyle(divs[2].current).display).toEqual('inline');
|
||||
});
|
||||
|
||||
it('hides and unhides child portals', async () => {
|
||||
const portalContainer = document.createElement('div');
|
||||
function Component() {
|
||||
return ReactDOM.createPortal(<span />, portalContainer);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Suspense fallback={<Text text="Loading..." />}>
|
||||
<AsyncText ms={500} text="A" />
|
||||
<Component />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, container);
|
||||
expect(window.getComputedStyle(portalContainer).display).toEqual('none');
|
||||
|
||||
await advanceTimers(500);
|
||||
Scheduler.unstable_flushAll();
|
||||
expect(window.getComputedStyle(portalContainer).display).toEqual('block');
|
||||
});
|
||||
|
||||
it('hides and unhides timed out text nodes', async () => {
|
||||
function App() {
|
||||
return (
|
||||
|
|
|
@ -645,6 +645,13 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
|
|||
} else {
|
||||
unhideInstance(node.stateNode, node.memoizedProps);
|
||||
}
|
||||
} else if (node.tag === HostPortal) {
|
||||
const instance = node.stateNode.containerInfo;
|
||||
if (isHidden) {
|
||||
hideInstance(instance);
|
||||
} else {
|
||||
unhideInstance(instance, node.memoizedProps);
|
||||
}
|
||||
} else if (node.tag === HostText) {
|
||||
const instance = node.stateNode;
|
||||
if (isHidden) {
|
||||
|
|
Loading…
Reference in New Issue