[Portal] renders children on a detached DOM node causing measuring and autoFocus to fail

[Swiftwork]

Describe the bug
The current way the Portal is written, mounts its children on a detached node. This causes children that need to use autoFocus or measure themselves to fail.

To Reproduce
Steps to reproduce the behavior:

1. Example below will not be able to auto focus the input.

export const TestDialog = () => {
  return (
    <Dialog2>
      <input autoFocus />
    </Dialog2>
  );
};

2. Example below will be able to auto focus the input.

export const TestDialog = () => {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  return (
    <Dialog2>
      {mounted && <input autoFocus />}
    </Dialog2>
  );
};

Expected behavior
Possible change to the way children are rendered, taking into account the different drawbacks detailed here reactjs/react.dev#272 (comment) and an update to the documentation outlining which method has been chosen. Potentially introducing a prop if possible to switch between mounting styles.

Desktop (please complete the following information):

• OS: All
• Browser: All
• Version: v34.2.0

Smartphone (please complete the following information):

• Device: All
• OS: All
• Browser: All
• Version: v34.2.0

Kind Regards
Erik Hughes

[lesliecdubs]

👋🏻 Hi @Swiftwork, sorry for the late reply here and thanks for filing this!

I'm going to ask our accessibility team to take a look at this and advise on whether we want to implement it. @alliethu what do you think?

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[Swiftwork]

Not stale

[lesliecdubs]

Sorry for the delay on this, @Swiftwork. Are you able to share any details about the desired behavior you're trying to accomplish in your application? It'd also be helpful if you could share a reproduction of the problem; you can fork this sandbox template if you'd like: https://codesandbox.io/s/primer-react-qyyepc. Thanks!

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.