Focus and keyboard navigation do not work in search results when disabled parents
Évaluation
- Difficulté
- 2/5
- Temps estimé
- 1-3 heures
- Accessibilité débutants
- 52/100
- Type d'issue
- Bug
- Clarté
- Plutôt claire
- Activité
- À l'abandon
- Stack technique
- react, typescript
- Domaine
- accessibility, frontend
Piste de recherche
Commencez par le point d’entrée getFirstMatchingNode décrit dans l’issue et reproduisez le comportement à l’aide du CodeSandbox associé, en comparant les cas avec un élément parent désactivé et un élément parent activé. Vérifiez que les enfants activés correspondants peuvent recevoir le focus et être sélectionnés avec Enter, puis ajoutez ou mettez à jour la couverture de régression si le dépôt contient des tests pertinents.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
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;
Demo after;
Initially created as an antD issue
Please let me know if I can provide any more information
- Langage dominant
- TypeScript
- Étoiles
- 312
- Forks
- 205
- Merge moyen
- 37 min
- PR mergées (30 j)
- 1
Préparer son environnement
Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de react-component/tree-select
-
treeTitleRender 回显时函数中的targetItem中只有value属性，只return targetItem.label时有效，return 拼接数据只能获取到value属性Ouverte
Difficulté 3/5 1-2 jours Accessibilité débutants 45/100
react-component/tree-select#528 ·
-
Difficulté 2/5 1-3 heures Accessibilité débutants 35/100
react-component/tree-select#485 ·
-
Difficulté 4/5 3-5 jours Accessibilité débutants 28/100
react-component/tree-select#466 ·
-
DFS这里是否能调整为尾递归Ouverte
Difficulté 3/5 1-2 jours Accessibilité débutants 35/100
react-component/tree-select#454 ·
-
Difficulté 2/5 1-3 heures Accessibilité débutants 48/100
react-component/tree-select#437 · 3 réactions ·
Toutes les issues de react-component/tree-select
Issues similaires
-
area:tui enhancement platform:macos
Difficulté 2/5 1-3 heures Accessibilité débutants 66/100
anthropics/claude-code#101490 ·
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 2/5 1-3 heures Accessibilité débutants 66/100
netlify/netlify-mcp#75 ·
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 2/5 1-3 heures Accessibilité débutants 78/100
atlassian-labs/compiled#1960 ·
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 2/5 1-3 heures Accessibilité débutants 75/100
pnp/cli-microsoft365#7639 ·
Les mainteneurs répondent en général sous 2 jours
-
nextjs-tracking
Difficulté 2/5 1-3 heures Accessibilité débutants 74/100
cloudflare/vinext#3887 ·
Les mainteneurs répondent en général sous 1 jour