feat(a11y): enhance keyboard interaction in search mode

Author: aojunhao123

src/OptionList.tsx

@@ -159,6 +159,21 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     }
   };
 
+  const getFirstMatchNode = (nodes: EventDataNode<any>[]): EventDataNode<any> | null => {
+    for (const node of nodes) {
+      if (filterTreeNode(node) && !node.disabled) {
+        return node;
+      }
+      if (node[fieldNames.children]) {
+        const matchInChildren = getFirstMatchNode(node[fieldNames.children]);
+        if (matchInChildren) {
+          return matchInChildren;
+        }
+      }
+    }
+    return null;
+  };
+
   // ========================= Keyboard =========================
   React.useImperativeHandle(ref, () => ({
     scrollTo: treeRef.current?.scrollTo,
@@ -175,7 +190,18 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
 
         // >>> Select item
         case KeyCode.ENTER: {
-          if (activeEntity) {
+          if (searchValue) {
+            const firstMatchNode = getFirstMatchNode(memoTreeData);
+
+            if (firstMatchNode) {
+              if (firstMatchNode.selectable !== false) {
+                onInternalSelect(null, {
+                  node: { key: firstMatchNode[fieldNames.value] },
+                  selected: !checkedKeys.includes(firstMatchNode[fieldNames.value]),
+                });
+              }
+            }
+          } else if (activeEntity) {
             const { selectable, value } = activeEntity?.node || {};
             if (selectable !== false) {
               onInternalSelect(null, {
@@ -197,10 +223,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,98 @@ 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
+          onSelect={onSelect}
+          open
+          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();
+    });
+
+    it('should not select any node when no search value and press enter', () => {
+      const onSelect = jest.fn();
+      const wrapper = mount(
+        <TreeSelect
+          showSearch
+          onSelect={onSelect}
+          open
+          treeData={[
+            { value: '1', label: '1' },
+            { value: '2', label: '2' },
+          ]}
+        />,
+      );
+
+      // Press enter without search value, should not select any node
+      wrapper.find('input').first().simulate('keyDown', { which: KeyCode.ENTER });
+      expect(onSelect).not.toHaveBeenCalled();
+
+      // Search and press enter, should select first matched node
+      wrapper.search('1');
+      wrapper.find('input').first().simulate('keyDown', { which: KeyCode.ENTER });
+      expect(onSelect).toHaveBeenCalledWith('1', expect.anything());
+    });
+
+    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();
+    });
+  });
 });