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

Menu of QSelect disappears when used inside shadow DOM #17325

Open
mariotragesercofinpro opened this issue Jun 26, 2024 · 1 comment
Open

Menu of QSelect disappears when used inside shadow DOM #17325

mariotragesercofinpro opened this issue Jun 26, 2024 · 1 comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@mariotragesercofinpro
Copy link

What happened?

When QSelect is used in a shadow DOM and a callback for the filter event is used for filtering the options, the menu disappears and the component loses focus after clicking a second time into the input field. When clicking a third time into the input, the menu still does not reappear and the component still has no focus.

What did you expect to happen?

The component should work the same way as when used outside a shadow DOM:
When clicking a second time into the input, the menu should disappear but the component should still have focus.
When clicking a third time into the input, the menu should reappear.

Reproduction URL

https://stackblitz.com/edit/quasarframework-xr93dh

How to reproduce?

  1. Go to the provided reproduction URL
  2. Find the QSelect in the section "Using MySelect as custom element"
  3. Click into the QSelect's input field three times. The menu opens on the first click, closes and loeses focus on the second click, and does not reopenon the third click.
  4. Compare to the QSelect used as a normal component without shadow DOM in the section "Directly using the component MySelect": The menu opens on the first click, closes on the second click and reopens on the third click.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

Operating System - Linux(5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36) - linux/x64
NodeJs - 18.20.3

Global packages
  NPM - 10.2.3
  yarn - 1.22.19
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.9.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.29 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.0
  pinia - Not installed
  vuex - Not installed
  vite - 5.3.1 -- Native-ESM powered web dev build tool
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - quasarframeworkxr93dh-33vl-3v9vztox
  en0 - 192.168.1.104

Relevant log output

-

Additional context

No response

@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite labels Jun 26, 2024
@mariotragesercofinpro
Copy link
Author

Hey there, I analyzed the issue and worked out a solution: #17326
Besides Quasar's unit tests, I tested the solution in my company's project.
Please mind that this is my very first open source pull request and give feedback if you need any additional information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

1 participant