Skip to content

Commit de2edc2

Browse files
authored
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 .
1 parent bb680a0 commit de2edc2

File tree

2 files changed

+30
-0
lines changed

2 files changed

+30
-0
lines changed

packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,29 @@ describe('ReactDOMSuspensePlaceholder', () => {
104104
expect(window.getComputedStyle(divs[2].current).display).toEqual('inline');
105105
});
106106

107+
it('hides and unhides child portals', async () => {
108+
const portalContainer = document.createElement('div');
109+
function Component() {
110+
return ReactDOM.createPortal(<span />, portalContainer);
111+
}
112+
113+
function App() {
114+
return (
115+
<Suspense fallback={<Text text="Loading..." />}>
116+
<AsyncText ms={500} text="A" />
117+
<Component />
118+
</Suspense>
119+
);
120+
}
121+
122+
ReactDOM.render(<App />, container);
123+
expect(window.getComputedStyle(portalContainer).display).toEqual('none');
124+
125+
await advanceTimers(500);
126+
Scheduler.unstable_flushAll();
127+
expect(window.getComputedStyle(portalContainer).display).toEqual('block');
128+
});
129+
107130
it('hides and unhides timed out text nodes', async () => {
108131
function App() {
109132
return (

packages/react-reconciler/src/ReactFiberCommitWork.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -645,6 +645,13 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
645645
} else {
646646
unhideInstance(node.stateNode, node.memoizedProps);
647647
}
648+
} else if (node.tag === HostPortal) {
649+
const instance = node.stateNode.containerInfo;
650+
if (isHidden) {
651+
hideInstance(instance);
652+
} else {
653+
unhideInstance(instance, node.memoizedProps);
654+
}
648655
} else if (node.tag === HostText) {
649656
const instance = node.stateNode;
650657
if (isHidden) {

0 commit comments

Comments
 (0)