Skip to content

Conversation

@hanool
Copy link

@hanool hanool commented Aug 28, 2025

Description

Currently, VMenu's overlay content styles are only applied to .v-card, .v-sheet and .v-list, which causes the menu to appear transparent and without borders when it contains a v-input child.
Adding .v-input to the targeted child elements resolves this issue, as addressed in #21926.

Markup:

<template>
  <v-app>
    <v-container>
      <v-menu>
        <template #activator="{ props }">
          <v-btn v-bind="props">open selection</v-btn>
        </template>
        <v-radio-group v-model="selected">
          <v-radio
            v-for="{ id, text } in items"
            :key="id"
            :label="text"
            :value="id"
          />
        </v-radio-group>
      </v-menu>
    </v-container>
  </v-app>
</template>

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

  const selected = ref(1)
  const items = [
    { id: 1, text: 'aaa' },
    { id: 2, text: 'bbb' },
  ]
</script>

@hanool hanool force-pushed the fix/v-menu-overlay-background-with-v-input branch from 4a85dd0 to 8de97da Compare August 28, 2025 23:18
@KaelWD KaelWD force-pushed the master branch 4 times, most recently from 142b234 to bb54746 Compare September 12, 2025 09:01
@hanool hanool force-pushed the fix/v-menu-overlay-background-with-v-input branch from 7742e93 to 8349341 Compare September 19, 2025 02:14
@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected C: VMenu labels Oct 9, 2025
@hanool hanool force-pushed the fix/v-menu-overlay-background-with-v-input branch from 8349341 to 1a3dd1a Compare October 9, 2025 01:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants