Cannot open a modal from within a modal

[marty-Wallace]

Issue summary

Because <Backdrop has a static z index of --p-z-index-10 and <Dialog> has a static z index of --p-z-index-11 it's not possible to cleanly open a modal from within a modal.

Opening a modal within a modal causes the <Backdrop> components to stack on --p-z-index-10 and the <Dialog> components to stack on --p-z-index-11. This causes the background modal to still be interactive.

We seem to have some Modal on Modal workflows in admin that use a <Portal> for the first modal (such as in the Settings modal).

Is this a bug or are modal-in-modal workflows intentionally disabled by these static z-index css rules?

Possible solutions

Could we fix this to make modals stackable or at least allow a z-index override (similar to tooltip and popover)?

• Prototype to allow a zIndexOverride to be passed through
• I also played around with putting the Backdrop and the Dialog on the same index and reversing the order they are rendered in, which seems to support infinite stacking of modals - but I'm not sure what other consequences there would be.

Expected behavior

I can open a modal from within a modal, the backdrop of the inner modal will cover the outer one and make it non-interactive.

Actual behavior

Gif showing issues when stacking modals

Steps to reproduce the problem

1. Create a <Modal> component that has a <Modal> in it
2. Open both modals
3. Notice that the backdrop components have stacked but are covering neither of the modals.

Reduced test case

https://codesandbox.io/s/stupefied-cartwright-xhxq3f

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 11.13.0
• Browser: Chrome 116.0.5845.140
• Device: Apple M1 Pro
• Operating System: macOS 13.5.1

[jackyxxli]

issue is now resolved. We have gathered, Floris, Elizabeth, Jess, Thomas and Yesenia and made the decision to go with popover. Here is a detailed walkthrough of our decision tree.
https://github.com/Shopify/polaris/assets/104929500/9856a635-f4fe-4e31-ba92-b365e1a47f35