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

QTree: Focus problem regarding nodes with shared keys #15328

Closed
ghandi3 opened this issue Jan 26, 2023 · 2 comments · Fixed by qburst/quasar#1 or #15444
Closed

QTree: Focus problem regarding nodes with shared keys #15328

ghandi3 opened this issue Jan 26, 2023 · 2 comments · Fixed by qburst/quasar#1 or #15444
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

@ghandi3
Copy link

ghandi3 commented Jan 26, 2023

What happened?

When using the QTree component and having a list of nodes where some of the keys which are leafs in different subtrees share their key (which is mandatory for our application):

  • ticking works fine and as expected
  • selecting also works for the selecting part, but the click at the node causes a focus action on all nodes with this specific key, which lets you jump to another node possible scrolling down on your page.

Changing the node with the shared key to selectable: false makes no difference regarding the focus behavior.

What did you expect to happen?

Changing the node with the shared key to selectable: false should deactivate the focus action so one can implement an own behavior via handler: () => void at the node.

Reproduction URL

https://codepen.io/gbalthasar/pen/WNKJgda

How to reproduce?

Click on the first node with the label 'Good table presentation' and it will scroll you down to the second node with this key.

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Microsoft Edge

Quasar info output

Operating System - Linux(4.19.128-microsoft-standard) - linux/x64
NodeJs - 16.19.0

Global packages 
  NPM - 9.2.0
  yarn - Not installed
  @quasar/cli - 1.4.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.10.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.1.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.45 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - 2.0.23 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.27.0 -- An AST-based pattern checker for JavaScript.
  electron - 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
  @quasar/quasar-app-extension-testing - 2.0.5 -- A Quasar App Extension for managing Test Harnesses
  @quasar/quasar-app-extension-testing-e2e-cypress - 5.0.0-beta.7 -- A Quasar App Extension for Cypress e2e

Relevant log output

No response

Additional context

No response

@pdanpdan
Copy link
Collaborator

You have more problems with the duplicate keys approach than the refocusing:

  • expand / collapse off all nodes with same key
  • refocusing
  • multiple selection

You can map your tree to have unique keys
https://codepen.io/pdanpdan/pen/PodZdEQ?editors=1010

@rstoenescu
Copy link
Member

Fix will be available in Quasar v2.11.7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment