[Bug Report][3.6.7] VSelect dropdown with attach gets opacity from VField

J-Sek commented 5 months ago

Environment

Vuetify Version: 3.6.7 Vue Version: 3.4.27 Browsers: Chrome 125.0.0.0 OS: Linux x86_64

Steps to reproduce

Use attach: true within menu-props for VSelect, VAutocomplete or VCombobox

Expected Behavior

Menu should be fully visible

Actual Behavior

Menu gets opacity from .v-field__input because it is placed inside this div in DOM

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

I wish I could rely on default attachment behavior but...

menu overlaps v-app-bar when I use it with strandard app layout (i.e. static header, footer, scrollable div instide v-main) - [example]
same overlapping issue within scrollable v-dialog - [example]
menu stays in the same place (detaches from the field) when I use vue3-perfect-scrollbar

As mentioned in #16855 style="z-index: 3000; position: relative" could be potential workaround, but it only fixes the most critical interference from checkboxes. I don't want my app to be incosistent by showing some menus translucent and others fully opaque. Can we move menu outside .v-field__input?

My workaround for now

:menu-props='{ scrollStrategy: 'close' }`

LuisFernando-hub commented 1 month ago

Hello, i have the problem, i used VSelect in dialog, when i used scroll and selected my options stay bugs

My code, this is inside a dialog VDialog

<VSelect v-model="...." label="Filtro de Exportação" :items="items" density="compact" />

KaelWD commented 1 month ago

Duplicate of #16855

vuetifyjs / vuetify