feat(a11y): enhance keyboard interaction in search mode

.gitignore

@@ -25,6 +25,7 @@ dist
 build
 lib
 coverage
+.vscode
 yarn.lock
 package-lock.json
 es

examples/basic.tsx

@@ -216,7 +216,6 @@ class Demo extends React.Component {
             console.log('onPopupScroll:', evt.target);
           }}
         />
-
         <h2>single select (just select children)</h2>
         <TreeSelect
           style={{ width: 300 }}
@@ -233,7 +232,6 @@ class Demo extends React.Component {
           filterTreeNode={false}
           onChange={this.onChangeChildren}
         />
-
         <h2>multiple select</h2>
         <TreeSelect
           style={{ width: 300 }}
@@ -249,7 +247,6 @@ class Demo extends React.Component {
           onSelect={this.onSelect}
           allowClear
         />
-
         <h2>check select</h2>
         <TreeSelect
           open
@@ -281,7 +278,6 @@ class Demo extends React.Component {
             return `${valueList.length} rest...`;
           }}
         />
-
         <h2>labelInValue & show path</h2>
         <TreeSelect
           style={{ width: 500 }}
@@ -299,7 +295,6 @@ class Demo extends React.Component {
           filterTreeNode={false}
           onChange={this.onChangeLV}
         />
-
         <h2>use treeDataSimpleMode</h2>
         <TreeSelect
           style={{ width: 300 }}
@@ -323,7 +318,6 @@ class Demo extends React.Component {
             this.onSelect(...args);
           }}
         />
-
         <h2>Testing in extreme conditions (Boundary conditions test) </h2>
         <TreeSelect
           style={{ width: 200 }}
@@ -347,7 +341,6 @@ class Demo extends React.Component {
           ]}
           onChange={(val, ...args) => console.log(val, ...args)}
         />
-
         <h2>use TreeNode Component (not recommend)</h2>
         <TreeSelect
           style={{ width: 200 }}
@@ -384,7 +377,6 @@ class Demo extends React.Component {
           </TreeNode>
           <TreeNode value="same value3" title="same title" key="0-3" />
         </TreeSelect>
-
         <h2>title render</h2>
         <TreeSelect<{ label: string }>
           open

src/OptionList.tsx

@@ -10,6 +10,7 @@ import LegacyContext from './LegacyContext';
 import TreeSelectContext from './TreeSelectContext';
 import type { Key, SafeKey } from './interface';
 import { getAllKeys, isCheckDisabled } from './utils/valueUtil';
+import { flattenTreeData } from 'rc-tree/lib/utils/treeUtil';
 
 const HIDDEN_STYLE = {
   width: 0,
@@ -76,7 +77,7 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     (prev, next) => next[0] && prev[1] !== next[1],
   );
 
-  // ========================== Active ==========================
+  // ========================== Active Key ==========================
   const [activeKey, setActiveKey] = React.useState<Key>(null);
   const activeEntity = keyEntities[activeKey as SafeKey];
 
@@ -92,16 +93,36 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     };
   }, [checkable, checkedKeys, halfCheckedKeys]);
 
-  // ========================== Scroll ==========================
+  // ========================== Scroll Effect ==========================
   React.useEffect(() => {
     // Single mode should scroll to current key
     if (open && !multiple && checkedKeys.length) {
       treeRef.current?.scrollTo({ key: checkedKeys[0] });
-      setActiveKey(checkedKeys[0]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
+  // ========================== Events ==========================
+  const onListMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
+    event.preventDefault();
+  };
+
+  const onInternalSelect = (__: Key[], info: TreeEventInfo) => {
+    const { node } = info;
+
+    if (checkable && isCheckDisabled(node)) {
+      return;
+    }
+
+    onSelect(node.key, {
+      selected: !checkedKeys.includes(node.key),
+    });
+
+    if (!multiple) {
+      toggleOpen(false);
+    }
+  };
+
   // ========================== Search ==========================
   const lowerSearchValue = String(searchValue).toLowerCase();
   const filterTreeNode = (treeNode: EventDataNode<any>) => {
@@ -122,13 +143,6 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     return searchValue ? searchExpandedKeys : expandedKeys;
   }, [expandedKeys, searchExpandedKeys, treeExpandedKeys, searchValue]);
 
-  React.useEffect(() => {
-    if (searchValue) {
-      setSearchExpandedKeys(getAllKeys(treeData, fieldNames));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchValue]);
-
   const onInternalExpand = (keys: Key[]) => {
     setExpandedKeys(keys);
     setSearchExpandedKeys(keys);
@@ -138,26 +152,66 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     }
   };
 
-  // ========================== Events ==========================
-  const onListMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
-    event.preventDefault();
-  };
+  // ========================== Search Effect ==========================
+  React.useEffect(() => {
+    if (searchValue) {
+      setSearchExpandedKeys(getAllKeys(treeData, fieldNames));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchValue]);
 
-  const onInternalSelect = (__: Key[], info: TreeEventInfo) => {
-    const { node } = info;
+  // ========================== Get First Selectable Node ==========================
+  const getFirstMatchingNode = (
+    nodes: EventDataNode<any>[],
+    searchVal?: string,
+  ): EventDataNode<any> | null => {
+    for (const node of nodes) {
+      if (node.disabled || node.selectable === false) {
+        continue;
+      }
 
-    if (checkable && isCheckDisabled(node)) {
+      if (searchVal) {
+        if (filterTreeNode(node)) {
+          return node;
+        }
+      } else {
+        return node;
+      }
+
+      if (node[fieldNames.children]) {
+        const matchInChildren = getFirstMatchingNode(node[fieldNames.children], searchVal);
+        if (matchInChildren) {
+          return matchInChildren;
+        }
+      }
+    }
+    return null;
+  };
+
+  // ========================== Active Key Effect ==========================
+  React.useEffect(() => {
+    if (!open) {
+      setActiveKey(null);
       return;
     }
 
-    onSelect(node.key, {
-      selected: !checkedKeys.includes(node.key),
-    });
+    // Prioritize activating the searched node
+    if (searchValue) {
+      const firstNode = getFirstMatchingNode(treeData, searchValue);
+      setActiveKey(firstNode ? firstNode[fieldNames.value] : null);
+      return;
+    }
 
-    if (!multiple) {
-      toggleOpen(false);
+    // If no search value, activate the first checked node
+    if (!multiple && checkedKeys.length) {
+      setActiveKey(checkedKeys[0]);
+      return;
     }
-  };
+
+    // If no search value and no checked nodes, activate the first node
+    const firstNode = getFirstMatchingNode(treeData);
+    setActiveKey(firstNode ? firstNode[fieldNames.value] : null);
+  }, [open, searchValue]);
 
   // ========================= Keyboard =========================
   React.useImperativeHandle(ref, () => ({
@@ -176,8 +230,8 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
         // >>> Select item
         case KeyCode.ENTER: {
           if (activeEntity) {
-            const { selectable, value } = activeEntity?.node || {};
-            if (selectable !== false) {
+            const { selectable, value, disabled } = activeEntity?.node || {};
+            if (selectable !== false && !disabled) {
               onInternalSelect(null, {
                 node: { key: activeKey },
                 selected: !checkedKeys.includes(value),
@@ -197,10 +251,10 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
   }));
 
   const loadDataFun = useMemo(
-    () => searchValue ? null : (loadData as any),
+    () => (searchValue ? null : (loadData as any)),
     [searchValue, treeExpandedKeys || expandedKeys],
     ([preSearchValue], [nextSearchValue, nextExcludeSearchExpandedKeys]) =>
-      preSearchValue !== nextSearchValue && !!(nextSearchValue || nextExcludeSearchExpandedKeys)
+      preSearchValue !== nextSearchValue && !!(nextSearchValue || nextExcludeSearchExpandedKeys),
   );
 
   // ========================== Render ==========================

tests/Select.SearchInput.spec.js

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import { mount } from 'enzyme';
 import TreeSelect, { TreeNode } from '../src';
+import KeyCode from 'rc-util/lib/KeyCode';
 
 describe('TreeSelect.SearchInput', () => {
   it('select item will clean searchInput', () => {
@@ -198,4 +199,101 @@ describe('TreeSelect.SearchInput', () => {
     nodes.first().simulate('click');
     expect(called).toBe(1);
   });
+
+  describe('keyboard events', () => {
+    it('should select first matched node when press enter', () => {
+      const onSelect = jest.fn();
+      const wrapper = mount(
+        <TreeSelect
+          showSearch
+          open
+          onSelect={onSelect}
+          treeData={[
+            { value: '1', label: '1' },
+            { value: '2', label: '2', disabled: true },
+            { value: '3', label: '3' },
+          ]}
+        />,
+      );
+
+      // Search and press enter, should select first matched non-disabled node
+      wrapper.search('1');
+      wrapper.find('input').first().simulate('keyDown', { which: KeyCode.ENTER });
+      expect(onSelect).toHaveBeenCalledWith('1', expect.anything());
+      onSelect.mockReset();
+
+      // Search disabled node and press enter, should not select
+      wrapper.search('2');
+      wrapper.find('input').first().simulate('keyDown', { which: KeyCode.ENTER });
+      expect(onSelect).not.toHaveBeenCalled();
+      onSelect.mockReset();
+
+      wrapper.search('3');
+      wrapper.find('input').first().simulate('keyDown', { which: KeyCode.ENTER });
+      expect(onSelect).toHaveBeenCalledWith('3', expect.anything());
+      onSelect.mockReset();
+    });
+
+    it('should not select node when no matches found', () => {
+      const onSelect = jest.fn();
+      const wrapper = mount(
+        <TreeSelect
+          showSearch
+          onSelect={onSelect}
+          open
+          treeData={[
+            { value: '1', label: '1' },
+            { value: '2', label: '2' },
+          ]}
+        />,
+      );
+
+      // Search non-existent value and press enter, should not select any node
+      wrapper.search('not-exist');
+      wrapper.find('input').first().simulate('keyDown', { which: KeyCode.ENTER });
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+
+    it('should ignore enter press when all matched nodes are disabled', () => {
+      const onSelect = jest.fn();
+      const wrapper = mount(
+        <TreeSelect
+          showSearch
+          onSelect={onSelect}
+          open
+          treeData={[
+            { value: '1', label: '1', disabled: true },
+            { value: '2', label: '2', disabled: true },
+          ]}
+        />,
+      );
+
+      // When all matched nodes are disabled, press enter should not select any node
+      wrapper.search('1');
+      wrapper.find('input').first().simulate('keyDown', { which: KeyCode.ENTER });
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+
+    it('should activate first matched node when searching', () => {
+      const wrapper = mount(
+        <TreeSelect
+          showSearch
+          open
+          treeData={[
+            { value: '1', label: '1' },
+            { value: '2', label: '2', disabled: true },
+            { value: '3', label: '3' },
+          ]}
+        />,
+      );
+
+      // When searching, first matched non-disabled node should be activated
+      wrapper.search('1');
+      expect(wrapper.find('.rc-tree-select-tree-treenode-active').text()).toBe('1');
+
+      // Should skip disabled nodes
+      wrapper.search('2');
+      expect(wrapper.find('.rc-tree-select-tree-treenode-active').length).toBe(0);
+    });
+  });
 });