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'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!

• javascript
• reactjs
• react-aria
• react-aria-components

• Your explanations look very reasonable. The only question is: why would you design such a behavior in the first place? I would suggest to redesign the entire thing. The modal behavior (more exactly, its imitation) itself is questionable. Normally, it is used only for the simplest and well-established cases, such as About box, file dialogs, and the like. A dialog triggering creation of another dialog is one of the things people hated, so it almost disappeared from practice. There are more modern and reasonable patterns. – Sergey A Kryukov Commented Feb 5 at 12:47
• That's entirely fair, and the flow here is absolutely up for changing. It's a ComboBox to search for existing "Filters". When no filter is found for the user's query, it shows a message "no filter found" with a button that says "Create a new filter". This is what opens the modal for the Filter creation form. It's entirely reasonable for this button to navigate to a new page for the form and then back again. I would prefer however to keep the page context during this creation - and the first diaglog isn't your traditional dialogue, more of a dropdown's menu. – Carwyn Stephen Commented Feb 5 at 13:11
• “And the first dialog isn't your traditional dialogue, more of a dropdown's menu.” That is a part of my concern, too. The non-traditional should mean no justification for the modal behavior. Instead, you could have a non-modal container with menus, but it could be shown/hidden/collapsed (better) or enabled/disabled depending on state... – Sergey A Kryukov Commented Feb 5 at 13:20
• What you described at the end of your comment is what I have - the confusion seems to be due to react-aria's naming of their components and my usage of those names. A Dialog in react-aria only means something that appears over the user-interface, which a dropdown menu should do in my opinon. The user experience is not that of a popup opening a new popup in succession. – Carwyn Stephen Commented Feb 5 at 13:39

1 Answer 1

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.