RaC Modal: add a prop to disable focus trap

[ingro]

Provide a general summary of the feature here

While locking the focus inside a Modal is the best overall approach and should remain the default behaviour it may create issue in particular cases, such as when other components inside the Modal creates popover or dialogs that cannot receive proper focus. In our case the problem has arisen when we tried to place a CK Editor istance inside a RaC Modal.

🤔 Expected Behavior?

If this new prop is set to true the Modal should not lock the focus within itself.

😯 Current Behavior

There are no ways to avoid this that I'm aware of at the moment.

💁 Possible Solution

I didn't find a way to implement this even using the lower level hooks like useDialog.

🔦 Context

Other libraries like MUI or ARK have provided ways to disable focus trap inside a Modal.

💻 Examples

This GIF should display the current behaviour.

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Related to https://github.com/adobe/react-spectrum/issues/5714#issuecomment-1900852107, this sounds like the same kind of issue. With regards to

We've discussed in the team in the past about perhaps allowing users to disable our focus management or register arbitrary elements as "ok to focus" but didn't land on anything yet

the team hasn't discussed any further about potential APIs but definitely share any opinions on how you'd like this to work (outside of an all or nothing boolean, ideally there would be more fine tuned control IMO, but happen to discuss).

[LFDanLu]

Something else you could try in the meantime is apply data-react-aria-top-layer to your 3rd party modals/dialogs if you are able. That should allow focus to move to those modals/dialogs even if there is an active contains FocusScope

[ingro]

Old issue but if anyone has the same problem it seems that adding the data-react-aria-top-layer attribute to the root element of the 3rd party dialog is working, thanks @LFDanLu