How to interact with SelectField inside a Modal (React Aria v3.19.0)

[kguptaping]

Hi all,

I'm using React Aria v3.19.0 in a React project and have built several accessible components using hooks like:

useSelect (for SelectField)

useComboBox (for ComboBoxField)

useDialog (for Modal Component)

Everything works fine individually, but I run into a problem when I try to use SelectField or ComboBox inside a Modal.

🐞 Issue:
When I open a Modal and try to interact with a Select or ComboBox inside it, the dropdowns or popovers become uninteractive / unclickable.

I inspected the DOM and found that the div element with data-overlay-container="true" is rendered outside the Modal overlay and has the inert attribute applied to it when the modal is open. This seems to be blocking interaction with the dropdowns.

React Aria marks the rest of the app as inert when the Modal is active (for accessibility), so anything outside the Modal — including overlays — becomes non-interactive.

❓ Question:
How can I properly render interactive SelectFields or ComboBoxes inside a Modal, so that their dropdowns remain interactive and accessible?

Is there a recommended pattern or fix for this?

✅ What I've Tried:
Wrapping the entire app with

Using a separate inside the Modal

Using explicitly inside the Modal content

Any guidance or best practices from the React Aria team or others who’ve faced this would be appreciated!

Thanks in advance 🙏

[snowystinger]

Thanks for the issue, could you provide a codesandbox or stackblitz? It's hard to know what your setup is otherwise. I can say this works in React Aria Components which are built on our hooks, so it should work. You're welcome to look through those components to see what all we did as well.

[kguptaping]

Here is the CodeSandbox link: https://codesandbox.io/p/sandbox/astro-selectfield-xwxxzj

Please let me know if you need any help with the code snippet for the Modal or SelectField component.

[snowystinger]

Thanks, it doesn't really show how the components were built though. What I can say though is that it looks like a styling issue. Something is rendering over the Select's popover.

Try using React Aria Components to create the same setup and it should work just fine. I can show it here: https://react-spectrum.adobe.com/react-aria/index.html if you click on the "Modal" in that landing page example.