Preventing multiple modals opening at the same time

[mhjb]

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]

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]

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