Vuetify: [feature request] dialogs should close after pressing "esc" key

[jacekkarczmarczyk]

Dialogs are not closing when user presses the "esc" key. Closing with "esc" key is so common behaviour that imho it should be the default behavior of Vuetify dialogs, even if it could be easy implemented by the dev

[johnleider]

After talking with the dev team we determined that this is something that can simply be done with @keydown.esc="model = false".

[bashilbers]

Do you have an example on how to do this? I am trying it with Vue 0.15.7 and I can't get it to work

[amritk]

I also can't get this to work

<v-dialog v-model="open" width="400" @keydown.esc="open = false">

[mr-july]

Please provide working example or reopen the issue! Applying @keydown.esc="open = false" on v-dialog has no effect!!!

[botic]

Imho this is also an accessibility issue since dialogs should be closable with the keyboard and not requiring a pointer-like device interaction. Other frameworks like Bootstrap close modal dialogs after the user pressed ESC. I would think the other way around: devs who don't like this behaviour should prevent it.

_Edit:_ Just found Mozilla's Marco Zehe's post (he is a blind accessibility expert).

As is customary in dialogs, there is usually a way to escape out of it without making changes. Often, this does the same as whatever the Cancel button does. You’ll have to provide the same functionality to your dialog. So, make sure pressing Escape will close your dialog, and usually discard any changes.

https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/

[jacekkarczmarczyk]

Temporary (and not perfect) solution:
https://codepen.io/anon/pen/KXyVmX

[johnleider]

Adding the ability for the dev to bind keydown events on v-dialog, allowing them to perform any functionality they wish.

[GianPaoloBuffo]

I'm running into an issue when I have a v-select nested within the v-dialog.

If I open the select and then press ESC to close the select, I end up closing the dialog as well. Ideally there should be some sort of hierarchy between these events.

CodePen: https://codepen.io/GPBuffo/pen/mLZBXj

[Made-of-Clay]

As a usage note, bind to the keydown event on the dialog. It's not in the docs; I found it in the GitHub source (https://github.com/vuetifyjs/vuetify/blob/dev/src/components/VDialog/VDialog.js#L154 https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDialog/VDialog.js#L168).

Example:

<v-dialog @keydown.esc="closeDialog"></v-dialog>

[f3ltron]

it work for me

[yabuking84]

has issues when you have nested dialogs and each has . It closes all opened dialog boxes.

How do you make it that it will only close the current dialog box shown?

[Made-of-Clay]

@yabuking84 I would say don't nest the dialogs. They can be side-by-side in the markup. In the case the dialog is the root element of some custom component, just wrap the two dialogs in a div.

I would recommend this even if it wasn't giving you issues. Nested dialogs semantically seem weird to me (even though that's kind of the behavior for the user).

[sense-it-gmbh]

@johnleider would it be possible to also fire keyup and keypress events along with keydown event? It seems a little bit odd, that only one of the well known Keyboard-Events get fired.