Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
J-Sek opened this issue Jun 3, 2024 · 0 comments
Open

Comments

@J-Sek
Copy link
Contributor

J-Sek commented Jun 3, 2024

Environment

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

Steps to reproduce

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

No branches or pull requests

1 participant