Skip to content

Activity mode=“hidden” does not hide nested portals #35000

@ceolinwill

Description

@ceolinwill

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

  1. Wrap a parent <div> inside <Activity mode="hidden">
  2. Inside that <div>, render any regular child and a portal via createPortal(...)
  3. Observe: regular child is hidden but the portal remains visible
  4. 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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions