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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant