Is there anyway to prevent v-dialog from closing?

Question

I'm utilizing <v-dialog> component to display a form for my web app. I want to implement an unsaved changes dialog to popup when the user aborts their changes without saving and either close/keep the dialog open depending on a button press. Unfortunately, I'm having a bunch of trouble figuring out exactly how to prevent the default closing actions done by the framework.

So from what I can tell, you can close a dialog 3 different ways:

Setting the v-model property to false.
Clicking outside of the v-dialog modal unless the persistent prop is set to true.
Pressing the escape key.

Let's not worry about the 2nd way to close the dialog I referenced above and assume it is set to true.

Approach #1:

My first approach was to only allow the user to exit the dialog if they hit a cancel button on the form. I quickly hit a snag when I tried to disable the use of the escape button.

Here's what I have tried so far: In my App.vue mounted function:

mounted () {
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      console.log('The escape key was pressed.')
      e.preventDefault()
      e.returnValue = false
      e.stopImmediatePropagation()
    }
  })
}

This should work. The log message is displayed in the console, but the dialog still closes after the escape key is pressed. I know I should be using key codes here, but this is for readabilities sake. I've also tried keyup and keypress with no success. There has to be something wonky happening in either the Vue.js or Vuetify framework that's messing this up.

Approach #2:

After I failed miserably trying to disable the escape key, I had to try something different. I tried adding this code inside the watch function to try and keep the dialog open if they cancelled:

dialog (val) {
  if (val) {
    console.log('Dialog is true')
  } else if (!val && !confirm('Unsaved changes, do you still want to exit?')) {
    console.log('User Wants to Keep Dialog Open')
    this.dialog = true
  } else {
    console.log('Dialog is False')
    this.close()
  }
}

When I try and close the dialog, the confirm message pops up, and I hit the cancel button. Then, for some reason, the confirm dialog opens again. So, I hit cancel again, then the dialog dismisses like nothing ever happened. Here's what the console reads:

User Wants to Keep Dialog Open
Dialog is true
User Wants to Keep Dialog Open
Dialog is true

I understand why the dialog watch method is being called again, what I don't understand is why the confirm dialog is showing again. That code should never be executing after cancelling the confirm message the first time. The log message shows that there's no way that code should be executing again. Something must be happening behind the scenes that I don't realize.

Anyone have experience with preventing the v-dialog component from closing? Or any help with my two approaches? Thanks in advance.

can you create a codesandbox of your problem? it will be easier to view it that way. — Prasanna
@Ohgodwhy's answer solves it, although Vuetify's docs don't mention that it prevents the escape button from exiting as well. — jrend

Ohgodwhy Ohgodwhy · Accepted Answer · 2020-01-17T20:58:12

It's a property on the dialog:

<v-dialog persistent

That will force them to keep it open unless you call the closure programatically by toggling the model.

Is there anyway to prevent v-dialog from closing?

1 Answers