Focus and keyboard navigation do not work in search results when disabled parents
Bewertung
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Anfängerfreundlichkeit
- 52/100
- Issue-Typ
- Bug
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Veraltet
- Tech-Stack
- react, typescript
- Bereich
- accessibility, frontend
Rechercherichtung
Beginne mit dem im Issue beschriebenen Einstiegspunkt getFirstMatchingNode und reproduziere das Verhalten mithilfe der verknüpften CodeSandbox, wobei du die Fälle mit deaktiviertem übergeordnetem Element und aktiviertem übergeordnetem Element vergleichst. Überprüfe, dass passende aktivierte untergeordnete Elemente den Fokus erhalten und mit Enter ausgewählt werden können, und füge Regressionstests hinzu oder aktualisiere sie, falls das Repository entsprechende Tests enthält.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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
- Vorherrschende Sprache
- TypeScript
- Sterne
- 312
- Forks
- 205
- Ø Merge
- 37 Min.
- Gemergte PRs (30 T.)
- 1
Entwicklungsumgebung
Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus react-component/tree-select
-
treeTitleRender 回显时函数中的targetItem中只有value属性，只return targetItem.label时有效，return 拼接数据只能获取到value属性Offen
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 45/100
react-component/tree-select#528 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 35/100
react-component/tree-select#485 ·
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 28/100
react-component/tree-select#466 ·
-
DFS这里是否能调整为尾递归Offen
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 35/100
react-component/tree-select#454 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 48/100
react-component/tree-select#437 · 3 Reaktionen ·
Alle Issues in react-component/tree-select
Ähnliche Issues
-
ai-driven-qa bug claude Minor
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100
linagora/twake-contacts-frontend#241 ·
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
Maintainer antworten meist innerhalb von 1 Tag
-
ui(ListToolbar): search takes the full row on a phone instead of sharing it with the result countOffen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 64/100
Maintainer antworten meist innerhalb von 1 Tag
-
priority:high
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100
ahmedkhaleel2004/gitdiagram#228 ·