Close VEditDialog from VDatePicker in VDataTable

[green-john]

I have a VDataTable that I am using to edit data in place. Here's what the current behavior is:

As you can see, the only way to close the dialog, is to click outside. I would like the dialog to close when a date is selected.

I can see here, that the VEditDialog has a handler for the keydown event with enter specifically. If my understanding is correct, this only works for text fields. So my question is, can I close the edit dialog from the VDatePicker's @input?

Thanks for the help

[jacekkarczmarczyk]

You can listen to input or change event on date picker and close menu when it's fired

[green-john]

Here's my code:

<v-edit-dialog>
{{ formatDate(item.currentTarget) }}
<template v-slot:input>
  <v-date-picker
    v-model="item.currentTarget"
    locale="en-US"
    @input="editMilestone({ id: item.id, currentTarget: $event })"
    no-title>
  </v-date-picker>
</template>
</v-edit-dialog>

Could you perhaps indicate how to interact with that edit dialog? I tried using refs and calling the cancel method but it still doesn't close.

[jacekkarczmarczyk]

Don't use v-edit-dialog for this, use v-menu, menu's model controlls the visibility so just set the model to false in picker's @input/@change handler

[green-john]

Ohh silly me! Of course. Thank you for the help.