diff --git a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js index 7f1d1c5db0729..e82ef6eff44ce 100644 --- a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js @@ -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(, portalContainer); + } + + function App() { + return ( + }> + + + + ); + } + + ReactDOM.render(, 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 ( diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index 02b525a12391f..2d337e24b44da 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -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) {