Modal is not closing itself after click

[Luckyfella73]

Describe the bug Modal is not closing

To Reproduce Method in my Vue component I call:

deleteConfirm() {
  this.$confirm({
    auth: true,
    message: 'foo',
    button: {
      yes: 'Yes',
      no: 'Cancel'
    },
    callback: (confirm, password) => {
      if (confirm && password === 'danger') {
        console.log('BOOOOM!');
      } else {
        console.log('relax');
      }
    }
  });
}

Expected behavior After clicking on Cancel or Yes I expect the modal to close.

Additional context When clicking outside the modal-messagebox (the modal-layer with background-color) the modal gets more and more transparent - so after maaany clicks its unvisible but I thought it should close itself directly after a button click. The console.log spits out the clicks correctly.

[DenisTsenov]

Hello @Luckyfella73. I have same issue. Do you manage to solve it? I implement Laravel Vue Datatable package and one of my columns is confirm delete action/button. It seems the modal to appear as many time as records in the table. So, if i have 3 table rows and i click on some of the confirm buttons, in order to close the modal i have to click 3 time outside of it or on some button ok/close in order to close it.

[Luckyfella73]

@DenisTsenov Unfortunately I didn't solve this issue. But if you are going to solve it I would appreciate if you post the solution here :)

[DenisTsenov]

Hi @Luckyfella73. Unfortunately i was unable to solve it, but i found few 'workarounds'. The first one is to redirect on the same page right after click on some of the ok/cancel buttons of the modal, which is kind of annoying. The other one is to move the coresponding modal in separate page(which i already have). And if you chose the second one you have to be careful where you put the button/link which invoke the modal, because if it is in a form, the modal will dissapear kind of flash within less than a second. If it is outside of a form tag the modal work fine.

First workaround:

confirmRemove() {
this.$confirm({
                title: `Remove team`,
                message: `Are you sure you want to continue ?`,
                button: {
                    no: 'Cancel',
                    yes: 'Ok'
                },
                /**
                 * Callback Function
                 * @param {Boolean} confirm
                 */
                callback: confirm => {
                    if (confirm) {
                        axios.post(this.destroyRoute)
                             .then(response => {
                               window.location = response.data.route;
                             }).catch(error => {
                          alert('Something went wrong! Please try again later');
                        });
                    }

                  window.location = you_app_url;
                }
            });
}

Second one is without window.location = you_app_url;, but ouside of a form tag and in a separate page.