I've created two components built on top of the components provided by react-aria-components:
ComboBox: renders a Popover beneath it to render the list of items, if there are no items present, the content of the Popover can be an empty state
Modal: I've made thin wrappers around Modal, Dialog, and ModalOverlay to apply my own styling.
The problem: I'm creating an empty state for my ComboBox that contains a DialogTrigger with a button and a modal inside. Clicking the button should open a modal to create a new resource.
However, when the button is clicked, this traps focus in my newly created Modal. Which fires a blur event on my Combobox Popover - this causes the Popover to unmount, which then unmounts the DialogTrigger within that contains the Modal. This causes the Modal to instantly disappear.
I was wondering if anyone has an established pattern for this kind of behaviour where one react-aria Dialog triggers another? I need to some way to preserve the ComboBox's Popover while the Modal is open.
If there is any confusion please ask for clarification - thanks in advance for any help!
I have found an answer after reading react-aria's documentation.
It seems the DialogContainer component was made for these situations - it allows you to place your Modal component tree outside of the Popover, and programmatically open it from there.
https://react-spectrum.adobe.com/react-spectrum/DialogContainer.html
For those who don't want to install react-spectrum in addition to react-aria - a more bare-bones solution would be to create a context that wraps both your Popover and Modal.
The context should provide some state that determines if your modal should be open, as well as a function to update that state. The button in your popover can then set that state to indicate that the modal should open.