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
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