-
Couldn't load subscription status.
- Fork 49.7k
Description
React's <Activity> component does not hide portals when they are nested under another element. Only direct portal children are hidden, causing inconsistent behavior.
React version: 19.2.0
Steps To Reproduce
- Wrap a parent
<div>inside<Activity mode="hidden"> - Inside that
<div>, render any regular child and a portal viacreatePortal(...) - Observe: regular child is hidden but the portal remains visible
- Remove the additional wrapper and observe that the portal is now hidden correctly
Link to code example: https://codesandbox.io/p/sandbox/hwt3pl
Minimal reproduction:
import { createPortal } from "react-dom";
import { Activity } from "react";
export default function App() {
return (
<Activity mode="hidden">
<div>
<h1>Hello</h1>
{createPortal(<p>Portal child (should be hidden)</p>, document.body)}
</div>
</Activity>
);
}The current behavior
Portals nested within another element inside remain visible when Activity is in “hidden” mode.
The expected behavior
All children of an element, including portals nested at any depth, should be hidden and restored consistently when using “hidden” mode.
Notes
Not sure if this is a bug or expected behavior, though. But I feel like we should either find a way to hide the portal or update the docs to mention this on the "unwanted side effects" section. Thoughts?