Prevent background modal closure when foreground is rendered/closed

[hema-segment]

Hi, is there a way to prevent background modal from closing when foreground modal is opened/closed.
I have two modals

1. a modal that popups on default on page load for user input
2. and an introduction announcement dialog that pops up when the user uses the feature the very first time

Whenever the announcement dialog is acknowledged/rendered, the user input dialog is closed.

Same thing happens when an ALert is acknowledged/rendered, the user input dialog is closed.

I tried to stop event bubbling, but it didn't work. Is there a way to prevent this behavior?

[dosubot[bot]]

🤖

Hey there, @hema-segment! 🎉 I'm Dosu, a bot here to help you tackle bugs, answer your questions, and guide you on contributing while we wait for a human maintainer to swoop in. Think of me as your friendly neighborhood assistant in this coding journey. 😄 I'm diving into your issue about modal behavior right now and will get back to you with a more detailed response shortly!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Side modal closure confirmation popover (updated: 06/29/2023, similarity score: 85%)
• preventing lost work if accidentally clicking outside of the modal - Answer (updated: 06/13/2023, similarity score: 85%)
• AlertDialog and asynchronous operations - Answer (updated: 06/27/2022, similarity score: 84%)

[dosubot[bot]]

🤖

Based on the current implementation of modals in the Paste codebase, it seems like the behavior you're experiencing might be due to how the onDismiss prop is being handled. This prop is a function that gets called when the modal is dismissed, and it's typically used to set the state of the modal to closed.

If you have multiple modals open at the same time and they're all using the same state variable to determine whether they're open or closed, dismissing one modal could inadvertently close all of them. This is because the onDismiss function would set the state to closed, and since all the modals are looking at the same state, they would all close.

One way to prevent this behavior might be to use separate state variables for each modal. For example:

const [isModal1Open, setIsModal1Open] = React.useState(true);
const [isModal2Open, setIsModal2Open] = React.useState(true);

const handleModal1Close = (): void => setIsModal1Open(false);
const handleModal2Close = (): void => setIsModal2Open(false);

// ...

<Modal ariaLabelledby={modal1HeadingID} isOpen={isModal1Open} onDismiss={handleModal1Close} size="default">
  {/* Modal 1 contents */}
</Modal>

<Modal ariaLabelledby={modal2HeadingID} isOpen={isModal2Open} onDismiss={handleModal2Close} size="default">
  {/* Modal 2 contents */}
</Modal>

In this example, each modal has its own isOpen and onDismiss props, so dismissing one modal won't affect the other.

As for the issue with the Alert component, it's hard to say without seeing your code, but it might be a similar issue. If the Alert component's onDismiss prop is also tied to the modal's state, dismissing the alert could close the modal. You might need to use a separate state variable for the alert as well.

I hope this helps! If you're still having trouble, could you provide a bit more information about how you're using the Modal and Alert components in your code? That might help me give more specific advice.

Sources

• packages/paste-core/components/modal/stories/index.stories.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[SiTaggart]

Hey @hema-segment

Can you also provide a minimal reproduction in Codesandbox for us? Might also be event propagation related too, if it's not state or onDismiss handling.

[nkrantz]

Hey @hema-segment - do you still need help with this discussion?

[TheSisb]

Multiple possible solutions were provided during office hours. The recording can be found in Slack.