Mantine Modal Stack Closing Behavior

Dash Python
1

I noticed a strange behavior with Mantine’s ModalStack component that occurs when using the close button or clicking outside the modal to close. Instead of just closing the modal, it seems traverse the modal stack in reverse.

For example, say I have 2 modals in the stack:

dmc.ModalStack(
  [
    dmc.ManagedModal(id='load_modal', children=[...]),
    dmc.ManagedModal(id='confirmation', children=[...])
  ]
)

The expected sequence is the user opens the load_modal, makes a selection, clicks a load button, then confirmation is displayed. This works as expected. Now however, if you click outside the modal or use the close button (x in the upper right) in the confirmation modal, it will take you back to load_modal rather than closing. You can circumvent this by disabling the close button and setting closeOnClickOutside = False, but it seems to me as not an ideal solution as you will need to manually implement a close button. Preferably, clicking outside or using the close button should have an option for simply closing all modals.

Is this expected behavior? Are there any workarounds besides disabling the closing features so that all modals get closed when using the close button or clicking outside?

2

Hi @Arick

This is expected behavior. If you would like to close all the modals, you can set closeAll prop in the ModalStack component . You can find an example in the docs here:
https://www.dash-mantine-components.com/components/modal#modal-stack

3

Hello @AnnMarieW , thanks for the quick reply. I saw the closeAll property, but I’m a little bit at a loss for how to use it when the user clicks on the ‘x’ close button or when they click outside of the modal. Is there a way to detect those events to trigger a callback that would update closeAll?

4

Those function are not enabled yet. Currently you would have to set withCloseButton=False and closeOnClickOutside=False and handle it with a button in the ManagedModal

5

Sounds good, that’s what I figured but wanted to make sure I wasn’t missing something :slight_smile:

Thanks again, I really appreciate how responsive you are to user questions.

1 Like