[Bug Report][3.1.7] v-select options becomes transparent when attach prop is used

[Chris-McQuiggan]

Environment

Vuetify Version: 3.1.7
Vue Version: 3.2.47
Browsers: Chrome 110.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

1. Add the menu prop "attach";
   a. to a select, autocomplete or combobox.
   b. set the default v-menu attach prop to true.
2. Open the selection menu
3. OBSERVE the list is transparent

Expected Behavior

The menu to not be transparent and can be clicked

Actual Behavior

The menu is transparent and can't be clicked

Reproduction Link

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

Other comments

Reproduction link for 1b.
https://play.vuetifyjs.com/#...

[Chris-McQuiggan]

Seems to be related to this which was resolved in vuetify 2 #11153

[KaelWD]

That was different, caused by VNavigationDrawer overriding VList background color. In your case the list does have a background color, it's just behind the textarea.
Why do you think you need to use attach here? Situations like this are exactly why we use teleport in the first place.

[Chris-McQuiggan]

That was different, caused by VNavigationDrawer overriding VList background color. In your case the list does have a background color, it's just behind the textarea. Why do you think you need to use attach here?

This was found when setting the default props on v-menu as we need every menu to be accessible with the keyboard and reader. So it's not actually needed on the select

[KaelWD]

we need every menu to be accessible with the keyboard and reader.

They should already be by default.

[Chris-McQuiggan]

we need every menu to be accessible with the keyboard and reader.

They should already be by default.

Not for what we are using it for but we aren't really using it conventionally. We are putting a mini form inside it.
The docs then suggested adding the attach property which fixed it.
I also need to know when the options in the v-select have focus or are hovered

[Chris-McQuiggan]

we need every menu to be accessible with the keyboard and reader.

They should already be by default.

Not for what we are using it for but we aren't really using it conventionally. We are putting a mini form inside it. The docs then suggested adding the attach property which fixed it.

For now i'm going to alias v-menu so that the defaults don't change in other components

[Chris-McQuiggan]

I've just found the other reason I needed attach on the v-select. I need to be able to know when one of the options has focus and as there is no @update:focused on the select I need to use @focusin which relies on the options to be a child

[KaelWD]

:menuProps="{ contentProps: { onFocusin }}" might work

[Chris-McQuiggan]

For completeness. I couldn't get :menuProps="{ contentProps: { onFocusin }}" to work but ended up using update:menu to see if the field was in use although I couldn't then see which options were focused.

[AlfreMK]

A workaround to consider is to add something like style="z-index: 3000; position: relative" in the v-select component (the position relative is necessary to override the position: static that is there by default).

Example:

<v-select
  label="select"
  :menu-props="{attach:true}"
  :items="[ 'test1', 'test2', 'foo', 'bar' ]"
  style="z-index: 3000; position: relative"
/>

Although you will still see it a little transparent