Vue/Vuetify: Showing/hiding dialog from parent component. Esc key not working

Question

I use vuetify library. I want to show a dialog from child component to parent component. I finished it. But ESC key not working when the first time dialog open. Looks like I'm making a mistake somewhere. Can someone help me?

Parent component:

HTML code

<template v-slot:top>
  <v-card-actions id="action">
    <v-btn color="primary" dark class="mb-2" @click.stop="showDialog">
      <v-icon>post_add</v-icon>Add
    </v-btn>
    <div class="mx-1" />
    // call dialog from child component
    <ItemCreationDialog
      :valueDialog="valueDialog"
      @updateValueDialog="updateValueDialog"
    />
  </v-card-actions>
</template>

javascript code:

<script>
import ItemCreationDialog from "./Dialog";

export default {
  components: { ItemCreationDialog },
  data: () => ({
    search: "",
    valueDialog: false,
  }),

  computed: {},

  watch: {},

  created() {},

  methods: {
    updateValueDialog(val) {
      this.valueDialog = val;
    },
    showDialog() {
      this.valueDialog = true;
    },
  },
};
</script>

Child component:

HTML code

<template>
  <v-dialog v-model="itemCreationDialog" max-width="800px">
    <v-card>
      <v-card-title> </v-card-title>
      <v-card-text> </v-card-text>

      <v-card-actions>
        <v-spacer />
        <v-btn color="primary" text @click="close">Cancel</v-btn>
        <v-btn color="primary" text @click="save">Save</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

javascript code:

<script>
export default {
  props: {
    valueDialog: Boolean,
  },
  data: function () {
    return {};
  },
  watch: {},
  computed: {
    itemCreationDialog: {
      get() {
        return this.valueDialog;
      },
      set(valueDialog) {
        this.$emit("updateValueDialog", false);
      },
    },
  },

  methods: {
    close() {
      this.$emit("updateValueDialog", false);
    },
    handleOpenPopup() {},
    save() {
      this.$emit("updateValueDialog", false);
    },
  },
};
</script>

Answer 1

I think you should add ESC event to the dialog. something like:

<v-dialog v-model="itemCreationDialog" max-width="800px" @keydown.esc="close">