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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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