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')">
    <!-- content -->
  </v-dialog>
</template>

Answer 2

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

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

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

Answer 6

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>

Answer 7

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

Answer 8

At version 3.4.9 of Feb 2024. If you have used the persistent attribute, according to this GitHub Bug Report This is still an issue. Some earlier Vuetify versions may work, others don't. I believe it is a bug.

On key event, it is not only bound to esc to close dialog. You may want ctrl+alt+O or shift+option+X to perform a special custom action of your own.

The safe workaround to handle it is to use mount and unmount event handler registration, and bypass the keyup.{keyname} event.

<script setup lang="ts">
  import { onUnmounted } from "vue";
  const keyFunc = (e: KeyboardEvent) => e.key === "Escape" && (dialog.value = false);
  document.addEventListener("keydown", keyFunc);
  onUnmounted(() => document.removeEventListener("keydown", keyFunc));
</script>