Vuetify v-menu leaves dropdown open after dialog appears

user_6055795 0
Viewed 1412

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?

vuetify.js vue.js
2 Answers

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

user_21148790

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>

user_106092190
Related