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

QSelect - Navigating throung Qselect with "Enter" key very fast never put focus on next QSelect #17578

Open
melissad87 opened this issue Oct 15, 2024 · 0 comments
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-webpack kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@melissad87
Copy link

melissad87 commented Oct 15, 2024

What happened?

We have two key requirements in the project:

Users need to navigate quickly as they are very familiar with the application.
Navigation between fields is done using the "Enter" key.
On QSelect, we are listening to the @keydown.enter.prevent event and manually setting focus to the next input. This works fine, except when we repeatedly press the "Enter" key in quick succession.

When adding logs to the focusin and focusout events, we noticed that they are never called.

I believe this issue might be related to the waitFlags in the focus manager, which prevents focus from being set immediately. Additionally, the showPortal function in use-portal seems to add a FocusWaitFlag each time the QSelect menu is shown or hidden (triggered by pressing the Enter key in QSelect).

What did you expect to happen?

Set focus on the next QSelect instead of getting stuck on the current one when the Enter key is pressed repeatedly.

Reproduction URL

https://stackblitz.com/edit/quasarframework-webpack-1o7tn6?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

  • Having multiple Qselect (It append easily with 3 or more)
  • on @keydown.enter.prevent, call a function calling .select() of next Select, repeat on each QSelect
  • Put cursor on first one
  • spam Enter Key to navigate

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.22631) - win32/x64
NodeJs - 22.3.0

Global packages
  NPM - 10.8.1
  yarn - 4.3.0
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.13.2 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.27 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.2
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.24.4 -- Babel compiler core.
  webpack - 5.91.0 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. S
upports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.11.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 7.1.0 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.9.4 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - OMT-MDUMONT-L
  Tailscale - 100.64.0.21
  Ethernet 4 - 192.168.0.183
  vEthernet (Default Switch) - 172.29.176.1

Relevant log output

No response

Additional context

The URL isn't woring because this is a huge project, but Main code use arround the bug is accessible

@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-webpack labels Oct 15, 2024
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-webpack kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

1 participant