title: Is there anyway to prevent v-dialog from closing?
body: <p>I'm utilizing <code>&lt;v-dialog&gt;</code> 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.</p>
  
  <p>So from what I can tell, you can close a dialog 3 different ways:</p>
  
  <ol>
  <li>Setting the <code>v-model</code> property to <code>false</code>.</li>
  <li>Clicking outside of the <code>v-dialog</code> modal unless the <code>persistent</code> prop is set to <code>true</code>.</li>
  <li>Pressing the escape key.</li>
  </ol>
  
  <p>Let's not worry about the 2nd way to close the dialog I referenced above and assume it is set to <code>true</code>.</p>
  
  <p><strong>Approach #1:</strong></p>
  
  <p>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.</p>
  
  <p>Here's what I have tried so far: In my App.vue <code>mounted</code> function:</p>
  
  <pre><code>mounted () {
    document.addEventListener('keydown', (e) =&gt; {
      if (e.key === 'Escape') {
        console.log('The escape key was pressed.')
        e.preventDefault()
        e.returnValue = false
        e.stopImmediatePropagation()
      }
    })
  } 
  </code></pre>
  
  <p><em>This should work.</em> 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 <code>keyup</code> and <code>keypress</code> with no success. There has to be something wonky happening in either the Vue.js or Vuetify framework that's messing this up.</p>
  
  <p><strong>Approach #2:</strong></p>
  
  <p>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:</p>
  
  <pre><code>dialog (val) {
    if (val) {
      console.log('Dialog is true')
    } else if (!val &amp;&amp; !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()
    }
  }
  </code></pre>
  
  <p>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 <em>again</em>. So, I hit cancel again, then the dialog dismisses like nothing ever happened. Here's what the console reads:</p>
  
  <blockquote>
    <p>User Wants to Keep Dialog Open<br/>
    Dialog is true<br/>
    User Wants to Keep Dialog Open<br/>
    Dialog is true<br/></p>
  </blockquote>
  
  <p>I understand why the dialog watch method is being called again, what I don't understand is why the <code>confirm</code> 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.</p>
  
  <p>Anyone have experience with preventing the <code>v-dialog</code> component from closing? Or any help with my two approaches? Thanks in advance.</p>