Recommendations for nesting/chaining dialogs?

[janvorwerk]

Hello everyone !

I have a need to nest dialogs:

• a first popover contains a few buttons, most of which are opening
• a second dialog within a modal dialog

I managed to do something like that :
https://codesandbox.io/p/sandbox/reverent-shape-mjdrgh

But it feels a bit awkwards that closing the second dialog is responsible for closing the first one: ideally I'd like pressing the button that opens the 2nd dialog is actually responsible for closing the 1st dialog. One of the rationales is that I wish the 1st dialog would not be visible through the backdrop of the 2nd modal dialog.

However if I close the 1st dialog, the second one is closed as well as it's a nested dialog. I am looking at a way to easily chain the dialogs, if possible without adding complex controlled state logic.

Any suggestion how I should do this with RAC? And advises on maintaining accessibility?

Thanks in advance
Best regards

[snowystinger]

It looks like you've hooked up the close1 function to the close button of the 2nd dialog?

We don't typically recommend nesting like this however. Typically it's better to close the Popup, then open the Dialog. See an example here https://react-spectrum.adobe.com/react-spectrum/DialogContainer.html#dialog-triggered-by-a-menu-item

Or with RAC https://react-spectrum.adobe.com/react-aria/index.html on the main example, you can access a Table row's action menu, then click the "Edit" button to launch into a modal Dialog.

[janvorwerk]

Many thanks @snowystinger!

Indeed I am using RAC, so the source code of the main page example is really helpful!

I guess the DialogContainer is solving exactly what was causing me an issue, but it's part of Spectrum... I could try to backport it but I am not going to look for more trouble: I guess if it was that easy, it would already be part of RAC!

DialogContainer is useful over a DialogTrigger when your have a trigger that can unmount while the dialog is open. For example, placing a DialogTrigger around a menu item would not work because the menu closes when pressing an item, thereby unmounting the DialogTrigger. When the trigger unmounts, so does the Dialog. In these cases, it is useful to place the dialog outside the tree that unmounts, so that the dialog is not also removed.

[snowystinger]

I think in RAC you can do what DialogContainer does just like this

react-spectrum/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx

Line 331 in 379e8d6

<Modal isOpen={dialog === 'delete'} onOpenChange={onDialogClose}>

[janvorwerk]

Yep, that's exactly what I had planed! 🙏

Earlier on, I was not using this pattern but keeping a useState<boolean> for each possible dialog... add to that the need to generate a random key on the dialog when I need to "reset" the content of the dialog and avoid showing stale data in uncontrolled forms... I reckon that all this can get quite tricky 🥹

[snowystinger]

I see, thank you for the feedback! I'll bring it up.