Focus and keyboard navigation do not work in search results when disabled parents

Aperta
#652 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
52/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript

Direzione di ricerca

Inizia dal punto di ingresso getFirstMatchingNode descritto nell’issue e riproduci il comportamento usando il CodeSandbox collegato, confrontando i casi con un elemento padre disabilitato e con un elemento padre abilitato. Verifica che gli elementi figli abilitati corrispondenti possano ricevere il focus ed essere selezionati con Enter, quindi aggiungi o aggiorna la copertura di regressione se il repository contiene test pertinenti.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

What is expected?

When the tree select search is used, focus is given to the first element, users can press 'Enter' to select it or use 'up' and 'down' keys to navigate other search results

Disabled elements in the search should not be given focus, but if their children are enabled their children should still be focused in search results

What is actually happening?

Any element with a disabled parent somewhere in their hierarchy is not given focus when searching, 'Enter' key will select the first element in the tree instead

This is bad UX but also not good for accessibility

I am using master from this repo during testing

Steps to reproduce
I have a demo sandbox here made with AntD but exact behaviour comes from rc-tree-select, I can adjust the demo if needed: https://codesandbox.io/p/devbox/confident-resonance-8jv7cz

The demo shows two cases, one working (No disabled parents) and one broken (Disabled parent)

To show the component not working:

Click on the treeselect search
Search for '1' (Or '2', or '3')
The child element gets focus, pressing enter on keyboard does nothing

To show the component working as expected:

Click on the treeselect search
Search for '3' (Or '4', or '5')
The child element gets focus, pressing enter on keyboard selects element

Suggested code fix - even if a parent is disabled or not selectable, check children

// ========================== Get First Selectable Node ==========================
const getFirstMatchingNode = (nodes: EventDataNode<any>[]): EventDataNode<any> | null => {
  for (const node of nodes) {
-    if (node.disabled || node.selectable === false) {
-      continue;
-    }
-
-    if (searchValue) {
-      if (filterTreeNode(node)) {
-        return node;
-      }
-    } else {
-      return node;
-    }
+    const isNodeSelectable = !node.disabled && node.selectable !== false;
+
+    if (isNodeSelectable) {
+      if (searchValue) {
+        if (filterTreeNode(node)) {
+          return node;
+        }
+      } else {
+        return node;
+      }
+    }
 
     if (node[fieldNames.children]) {
       const matchInChildren = getFirstMatchingNode(node[fieldNames.children]);
       if (matchInChildren) {
         return matchInChildren;
       }
     }
   }
   return null;
};

Demo before;

Image

Demo after;

Image

Initially created as an antD issue

Please let me know if I can provide any more information

Lingua principale
TypeScript
Stelle
312
Fork
204
Merge medio
37m
PR unite (30g)
1

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-component/tree-select

Tutte le issue di react-component/tree-select

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.