Vuetify v-menu leaves dropdown open after dialog appears - vue.js

Question

I have a v-menu which contains a v-list with a custom component.
<v-toolbar class="transparent">
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">
<span><v-icon>mdi-menu</v-icon></span>
</v-btn>
</template>
<v-list>
<AdminAgentList/>
</v-list>
</v-menu>
... more ...
That component is a dialog which defines a v-list-item to slot into the v-list in the v-menu.
<template>
<div> <!-- Agent List -->
<v-dialog v-model="agentList_dlgOpen" persistent max-width="40%" #keydown.esc="agentList_dlgOpen = false">
<template v-slot:activator="{ on, attrs }">
<v-list-item v-bind="attrs" v-on="on">
<v-list-item-title><v-icon>mdi-account-multiple</v-icon> Agent List</v-list-item-title>
</v-list-item>
</template>
<v-card>
<v-card-title>Agent List Maintenance</v-card-title>
<v-card-text>
...
The problem I have is that when I click the dropdown menu item, the dialog appears and works fine. Once I dismiss the dialog, I'm back to the page but the menu item (the "Agent List" dropdown itself) is still showing hovering above the rest of the page. How do I get the dropdown list to disappear after I select something from it?

Answer 1

the problem is if the list item is the activator then it must be open until the dialog is open
my solution would be:
<v-menu offset-y v-model="menu">
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">
<span><v-icon>mdi-menu</v-icon></span>
</v-btn>
</template>
<v-list>
<AdminAgentList #close-menu="menu = false" />
</v-list>
</v-menu>
adding a v-model to the menu and controlling visibility
and in the other component AdminAgentList:
watch: {
agentList_dlgOpen(val) {
if (!val) {
this.$emit("close-menu");
}
},
},
a watcher to check if the dialog closed

Answer 2

Try this.
<v-toolbar class="transparent">
<v-menu #input="onMenuToggle" open-on-hover v-model="isOpened" offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">
<span><v-icon>mdi-menu</v-icon></span>
</v-btn>
</template>
<v-list>
<AdminAgentList/>
</v-list>
</v-menu>
export default {
data() {
return {
isOpened: false,
selectedCategori: [],
categori: {},
overlay: false,
};
},
methods: {
onMenuToggle(val) {
this.isOpened = val;
},
},
};
</script>