[Dialog - FocusScope] Focus is not trapped inside the dialog opened

[Klynger]

Bug report

Current Behavior

In certain conditions, if you have a dialog, you can still navigate through elements outside the dialog using the tab key right after you open it.

CleanShot.2024-09-11.at.15.02.01.mp4

Expected behavior

The dialog should trap the focus when opened and not let it leave until it’s closed.

Reproducible example

CodeSandbox Template

1. Click on "Delete account"
2. Hold Shift and press Tab
3. You will start navigating on elements behind the dialog and across the codesandbox window

Suggested solution

I'm not familiar with the code, but I imagine FocusScope is responsible for trapping the focus inside when mounted. However, there might be some use cases where you folks intended to use FocusScope without trapping the focus on mount. If that’s the case, I think Dialog/AlertDialog should pass a prop to FocusScope to ensure it traps the focus on mount.

https://github.com/radix-ui/primitives/tree/main/packages/react/focus-scope

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	FocusScope	latest
React	n/a
Browser	Chrome	128.0.6613.120 (Official Build) (arm64)
Assistive tech
Node	n/a
npm/yarn	n/a
Operating System	n/a