Close dialog when ESC key is pressed

Question

How can i close a vuetify's dialog opened without an activator, when the user press the ESC key on the keyboard?

Traxo · Accepted Answer · 2018-11-22T08:53:38.143

54

Add @keydown.esc="dialog = false" to v-dialog component

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

data: () => ({
  dialog: false
}),

Working example: https://codepen.io/anon/pen/BJOOOQ

Additionally, if using dialog as custom component then possibly we need to emit input event:

<template>
  <v-dialog :value="value" @keydown.esc="$emit('input')">
  ...

edited Nov 22 '18 at 08:53

answered Jan 16 '18 at 13:27

Traxo

18,464
4
75
87

1

Thanks, with keyup it doesn't work, but with keydown ... interesting, a possible bug? @Tom works. – Benno Eggnauer Jan 16 '18 at 13:38
@benno I believe it's not a bug, just `keydown` was supported implemented for this case. – Traxo Jan 16 '18 at 13:39
can you explain a little bit further, what is the difference between keydown and keyup in this case? But aniway, it works! – Benno Eggnauer Jan 16 '18 at 13:43
@benno as far as I understand, there is no difference in events per se. It's just that vuetify devs added `keydown` listener for `v-dialog` and they **didn't** add `keyup` listener. That's all. – Traxo Jan 16 '18 at 13:47
2

This only works, if you have selected anything inside the modal. If there is no selection, the event will be triggered on the body and it will not work. Hence the solution of @Dazzle is sadly the better. – Nils-o-mat Apr 24 '20 at 10:05

Dazzle · Answer 2 · 2020-04-24T10:39:32.070

15

This is the only way I was able to get it to work

mounted() {
    // Close modal with 'esc' key
    document.addEventListener("keydown", (e) => {
        if (e.keyCode == 27) {
            this.$emit('close');
        }
    });
},

edited Apr 24 '20 at 10:39

answered Jun 11 '19 at 21:24

Dazzle

2,880
3
25
52

kamiyar · Answer 3 · 2018-01-06T10:32:31.817

7

this code maybe can help you

mounted() {
        let self = this;
        window.addEventListener('keyup', function(event) {
            // If  ESC key was pressed...
            if (event.keyCode === 27) {
                // try close your dialog
                self.advanced_search = false;
            }
        });
    },

edited Jan 06 '18 at 10:32

answered Jan 06 '18 at 10:17

kamiyar

177
1
12

It's much simpler, check my answer – Traxo Jan 16 '18 at 13:40
@Traxo i khow this way can be... but benno wants to use keyup! – kamiyar Jan 17 '18 at 15:07
how did you come to that conclusion? It isnt stated anywhere afaics – Traxo Jan 17 '18 at 15:32

score 1 · Answer 4 · answered May 04 '19 at 02:19

the same principle as adding keypress binding to any vue component should work - add the following code to the v-dialog component :

 @keydown.esc="dialog = false"

working example ( note the close button click event handler as well )

https://codepen.io/yordangeorgiev/pen/WBeMGq

score 0 · Answer 5 · edited Jul 16 '22 at 04:56

0

What you want to use is a Key Modifier. You can use v-on:keyup.esc directive on your dialog to detect if the escape key is detected.

Read this for more information about Key Modifiers

edited Jul 16 '22 at 04:56

tony19

125,647
18
229
307

answered Sep 30 '17 at 15:21

dovahkiin

43
8

@benno Did you find a working solution for this issue? I have the same problem... – Tom Jan 02 '18 at 13:49
1

@Tom not until now, but I will post here if I have one. – Benno Eggnauer Jan 03 '18 at 12:06
`keyup` doesn't work. But `keydown` is supported, see my answer – Traxo Jan 16 '18 at 13:41

score 0 · Answer 6 · edited Jul 16 '20 at 15:36

While the solutions others have mentioned work, there still are conflicts with the bounce animation, making it not work after playing it by clicking outside the dialog, etc.

Setting the no-click-animation property also fixes the animation when closing as otherwise it plays both the close and bounce animation:

<v-dialog v-model="dialog" @keydown.esc="dialog=false" no-click-animation></v-dialog>

score 0 · Answer 7 · answered Nov 25 '21 at 22:37

@keydown.esc not working with my project. As far as I see it's good for Vue2 projects.

Working script:

mounted() {
    document.addEventListener("keydown", (e) => {
        if (e.key === 'Escape') {
            this.$emit('close');
            // Or any other way you want to close your modal
        }
    })
}

Close dialog when ESC key is pressed

7 Answers7

Linked