Close dialog when ESC key is pressed

Viewed 27455

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

7 Answers

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')">
  ...

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');
        }
    });
},

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;
            }
        });
    },

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

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

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>

@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
        }
    })
}
Related