Dialog Focus Trapping With Portals

[elson-currentcorp]

Assume I have a Select component inside a Dialog component, and both are rendered using portals.

What is the best way to handle trapping focus within the modal while still being able to loop through the Select options using arrow keys when the dropdown is open?

Seems like if the dropdown is rendered using a portal while inside a Dialog, the navigation accessibility features are disabled since focus is trapped within the Dialog.

[segunadebayo]

We'll update the docs shortly. I recommend avoiding using a portal within the modal dialog because it traps focus.

Removing the portal should make it work as expected.

[baptisteArno]

Honestly not a viable solution because it most likely won't look good...

With Portal:

Without Portal

The only workaround I see for now is setting closeOnInteractOutside to false. But not the best UX 😢

[baptisteArno]

This seems to do the job fine alongside closeOnInteractOutside={false}:

<Dialog.Positioner onClick={() => onClose()} className="pointer-events-auto">

<Dialog.Content onClick={(e) => e.stopPropagation()}>

[segunadebayo]

Could you try these alternatives?
#3544 (comment)