CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Benno Eggnauer
Benno Eggnauer

Reputation: 873

Close dialog when ESC key is pressed

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

Upvotes: 37

Views: 37135

Answers (8)

Tom
Tom

Reputation: 16276

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>

Upvotes: 0

Traxo
Traxo

Reputation: 19022

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>

Upvotes: 57

dovahkiin
dovahkiin

Reputation: 43

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

Upvotes: 0

Michael Stachura
Michael Stachura

Reputation: 1370

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

Upvotes: 0

Isak Westerlund
Isak Westerlund

Reputation: 11

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>

Upvotes: 1

Dazzle
Dazzle

Reputation: 3093

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

Upvotes: 15

Yordan Georgiev
Yordan Georgiev

Reputation: 5460

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

Upvotes: 1

kamiyar
kamiyar

Reputation: 193

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

Upvotes: 8

Related Questions