Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preventing multiple modals opening at the same time #810

Open
mhjb opened this issue Aug 29, 2023 · 2 comments
Open

Preventing multiple modals opening at the same time #810

mhjb opened this issue Aug 29, 2023 · 2 comments

Comments

@mhjb
Copy link

mhjb commented Aug 29, 2023

Hi team

I have a button whose @click event is attached to a function that does some work, then runs this.$modal.show(…). I want to prevent multiple clicks resulting in multiple modals. I am looking for something like if (this.$modal.isVisible) …, but can't find anything like that. Any ideas?

Thank you
Matthew

@FeBe95
Copy link

FeBe95 commented Sep 4, 2023

Hello there,

I am currently facing the same problem. We have registered some hotkeys in our app, with some of them opening modals. Pressing a hotkey multiple times should not open the modal multiple times.

Proposed solution(s):

1. singleInstance

A new property called singleInstance would help a lot! Setting singleInstance: true for a modal:

this.$modal.show(MyModal, ..., { singleInstance: true }, ...);

The modal detection logic could be implemented like this:

beforeOpen(event) {
  if (event.params.singleInstance === true) {
    let componentName = this.name; // 'MyModal'
    let modals = this.$modal.context.root.__modalContainer?.modals;
    let alreadyOpen = modals.some(m => m.component.name === componentName)

    if (alreadyOpen) {
      event.cancel();
    }
  }
}

2. preventOtherModals

An additional property could be preventOtherModals. It could prevent any new modal from opening if another modal is already present.

this.$modal.show(MyModal, ..., { preventOtherModals: true }, ...);
beforeOpen(event) {
  if (event.params.preventOtherModals === true) {
    let modals = this.$modal.context.root.__modalContainer?.modals;
    let preventOpening = modals.length > 0;

    if (preventOpening) {
      event.cancel();
    }
  }
}

Notes

Implementing this property globally for all modals would be the preferred solution, instead of manually adding the beforeOpen event to each modal component.

For the code snippets I took some inspiration from the conditional modal example:
https://github.com/euvl/vue-js-modal/blob/master/demo/src/App.vue#L97-L101
https://github.com/euvl/vue-js-modal/blob/master/demo/src/components/Modal_Conditional.vue#L18-L25

@mhjb
Copy link
Author

mhjb commented Feb 8, 2024

⬆️ I've asked another modal module's developer whether his module fixes the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants