Close the dialog when pressing the ESC key

Question

How to close the vuetify dialog opened without an activator when the user presses the ESC key on the keyboard?

Answer 1

Add @keydown.esc="dialog = false"to componentv-dialog

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

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

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

---

In addition, if you use the dialog as a custom component, then perhaps we need to throw an input event:

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

Answer 2

What you want to use is a key modifier. You can use the directive v-on:keyup.escin the dialog box to determine if a key is found escape.

Answer 3

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 should work as when adding a binding to any vue component - add the following code to the v-dialog component:

 @keydown.esc="dialog = false"

working example (pay attention also to the event handler for clicking the close button)

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

Answer 5

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