vue.js - menu won't close when a hover-triggered menu is present in Vuetify 3 - Stack Overflow

admin管理员组

文章数量:1287833

I'm encountering an issue in Vuetify 3 when using v-menu. If there's a v-menu that opens on hover (open-on-hover), other v-menu components won't close properly.

Here’s a simplified version of my code:

<template>
  <v-app>
    <v-container>
      <!-- Button Component -->
      <v-btn color="primary">
        Action Button
        <v-menu activator="parent"> Action menu </v-menu>
      </v-btn>

      <!-- Input Component -->
      <v-text-field
        v-model="msg"
        style="margin-top: 20px"
      >
        <v-menu activator="parent" :open-on-hover="true">
          Text field messages
        </v-menu>
      </v-text-field>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('')
</script>

Code Link: +syu8q+cP1s76gMWiWDJ2VivG+7UBWPaVsjb9TY+aDKvWoDuEJHhTVd8DMxl4pM6SQcNVNcB99Y8N1KTJrdaFdW2n3Nu6OBEAHmpuJTsXGcKS2aEJoATuFed05aS8ZB+TEmM5z9ShqQSkq7zHKn8aG1iUXBXJ+MpV06LegBSjDWpp1/ntugDPbxrjS7ltayomu4C7b/b1bIiD2iEAV4WP8QVZNBWZ6pl6jCR2AS8otSaPkRONj6Jr3db/hdso7c/IIy0Av2QayNN06L3aoh9JvWbXMP9x2RI833aM5GNYzkdHIk9fu9YyeOSQb6UVjx3DDhw202R5YNzAHhpHHZRyaWXejXTwDOIzrCJ3Uv5ArQl+k9Obm/J2oCSPpESmpelHaEN18J+i/pleng42XFAGEpnHaK3gqGF1D7tsQwRJ40zTdlIm8xdQToWT6u/HFQ4S777W+Bk8Fhk5R9Mmk9uRHCcWO3NqNeuVDgjv76fqOZK0nY1nyQb7FL+W6+1P+KW+5TxvV/Za7KcmaJ1+/n4AMK9ckg==

Issue: Open the "Action menu" by clicking the button. Hover over the "Text field" to trigger the hover menu. Now click on the text field — the "Action menu" remains open What I want: When clicking the text field, any other open menu should close automatically.

The use case is I have a text field and it's prompter button to open calendar, date picker or whatever as a v-menu. when hover on text field, here will display some messages as another v-menu.

I read some vuetify's code, only the top Overlay will be closed, since the hover menu is the top one so the action menu won't be closed. I hope to find a simple way (if possible) to fix it.

Thanks in advance!

I'm encountering an issue in Vuetify 3 when using v-menu. If there's a v-menu that opens on hover (open-on-hover), other v-menu components won't close properly.

Here’s a simplified version of my code:

<template>
  <v-app>
    <v-container>
      <!-- Button Component -->
      <v-btn color="primary">
        Action Button
        <v-menu activator="parent"> Action menu </v-menu>
      </v-btn>

      <!-- Input Component -->
      <v-text-field
        v-model="msg"
        style="margin-top: 20px"
      >
        <v-menu activator="parent" :open-on-hover="true">
          Text field messages
        </v-menu>
      </v-text-field>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('')
</script>

Code Link: https://play.vuetifyjs/#eNp9U8Fu2zAM/RXWF6dAnAw9BkmBrpft0NuAHZYdNIdOjcmiIFFuizT/XkpKYidIewkivkfy8ZH+syu8q+cP1s76gMWiWDJ2VivG+7UBWPaVsjb9TY+aDKvWoDuEJHhTVd8DMxl4pM6SQcNVNcB99Y8N1KTJrdaFdW2n3Nu6OBEAHmpuJTsXGcKS2aEJoATuFed05aS8ZB+TEmM5z9ShqQSkq7zHKn8aG1iUXBXJ+MpV06LegBSjDWpp1/ntugDPbxrjS7ltayomu4C7b/b1bIiD2iEAV4WP8QVZNBWZ6pl6jCR2AS8otSaPkRONj6Jr3db/hdso7c/IIy0Av2QayNN06L3aoh9JvWbXMP9x2RI833aM5GNYzkdHIk9fu9YyeOSQb6UVjx3DDhw202R5YNzAHhpHHZRyaWXejXTwDOIzrCJ3Uv5ArQl+k9Obm/J2oCSPpESmpelHaEN18J+i/pleng42XFAGEpnHaK3gqGF1D7tsQwRJ40zTdlIm8xdQToWT6u/HFQ4S777W+Bk8Fhk5R9Mmk9uRHCcWO3NqNeuVDgjv76fqOZK0nY1nyQb7FL+W6+1P+KW+5TxvV/Za7KcmaJ1+/n4AMK9ckg==

Issue: Open the "Action menu" by clicking the button. Hover over the "Text field" to trigger the hover menu. Now click on the text field — the "Action menu" remains open What I want: When clicking the text field, any other open menu should close automatically.

The use case is I have a text field and it's prompter button to open calendar, date picker or whatever as a v-menu. when hover on text field, here will display some messages as another v-menu.

I read some vuetify's code, only the top Overlay will be closed, since the hover menu is the top one so the action menu won't be closed. I hope to find a simple way (if possible) to fix it.

Thanks in advance!

• vue.js
• vuetify.js
• vuetifyjs3

Share Improve this question Follow asked Feb 23 at 17:17 Yu yukiYu yuki 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can use <v-hover> + messages prop of <v-text-field> instead of <v-menu> to implement popup messages.

<v-hover>
  <template #default="{ isHovering, props }">
    <v-text-field
      v-bind="props"
      v-model="msg"
      :messages="isHovering?'Text field messages':''"
    >
    </v-text-field>
  </template>
</v-hover>

Playground

本文标签： vuejsmenu won39t close when a hovertriggered menu is present in Vuetify 3Stack Overflow