Skip to content

fix(VMenu): custom overlays and tooltips should not prevent closing#22993

Draft
J-Sek wants to merge 1 commit into
devfrom
fix/vmenu-close-with-tooltip
Draft

fix(VMenu): custom overlays and tooltips should not prevent closing#22993
J-Sek wants to merge 1 commit into
devfrom
fix/vmenu-close-with-tooltip

Conversation

@J-Sek

@J-Sek J-Sek commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

When menu content has a tooltip or custom connected overlay that does not close on hover-out, the menu requires subsequent click-outside to close - first click is "swallowed" by the tooltip/overlay. This is inconsistent with VMenu cascading close.

Markup:

<template>
  <v-app theme="dark">
    <v-container class="d-flex ga-3">
      <v-select
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        :menu-props="{ id: '#1' }"
        label="Select"
      />

      <v-combobox
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        :menu-props="{ id: '#2' }"
        label="Combobox"
      />

      <v-menu id="#3" :close-on-content-click="false">
        <template #activator="{ props }">
          <v-btn v-bind="props">Menu with Autocomplete</v-btn>
        </template>
        <v-sheet class="d-flex flex-column ga-3 pa-4" style="width: 300px">
          <v-autocomplete
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            :menu-props="{ id: '#3-1' }"
            label="Autocomplete"
          />
          <v-btn>
            Button with tooltip
            <v-tooltip id="#3-2" :open-on-hover="false" activator="parent" open-on-click>Tooltip</v-tooltip>
          </v-btn>
          <v-btn>
            Button with menu
            <v-menu id="#3-3" activator="parent">
              <v-card>Menu content</v-card>
            </v-menu>
          </v-btn>
          <v-btn>
            Button with overlay
            <v-overlay id="#3-3" :scrim="false" activator="parent" location="bottom" location-strategy="connected">
              <v-card>overlay content</v-card>
            </v-overlay>
          </v-btn>
        </v-sheet>
      </v-menu>
    </v-container>
  </v-app>
</template>

@J-Sek J-Sek added this to the v4.2.0 milestone Jul 7, 2026
@J-Sek J-Sek self-assigned this Jul 7, 2026
@J-Sek J-Sek added T: bug Functionality that does not work as intended/expected C: VMenu C: VOverlay labels Jul 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

C: VMenu C: VOverlay T: bug Functionality that does not work as intended/expected

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant