feat(a11y): enhance keyboard interaction in search mode

src/OptionList.tsx

@@ -92,16 +92,61 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     };
   }, [checkable, checkedKeys, halfCheckedKeys]);
 
+  // ========================== Get First Selectable Node ==========================
+  const getFirstSelectableNode = (nodes: EventDataNode<any>): EventDataNode<any> | null => {
+    for (const node of nodes) {
+      if (node.selectable !== false) {
+        return node;
+      }
+      if (node[fieldNames.children]) {
+        const selectableInChildren = getFirstSelectableNode(node[fieldNames.children]);
+        if (selectableInChildren) {
+          return selectableInChildren;
+        }
+      }
+    }
+    return null;
+  };
+
   // ========================== Scroll ==========================
   React.useEffect(() => {
-    // Single mode should scroll to current key
-    if (open && !multiple && checkedKeys.length) {
-      treeRef.current?.scrollTo({ key: checkedKeys[0] });
-      setActiveKey(checkedKeys[0]);
+    if (open) {
+      // Single mode should scroll to current key
+      if (!multiple && checkedKeys.length) {
+        treeRef.current?.scrollTo({ key: checkedKeys[0] });
+        setActiveKey(checkedKeys[0]);
+      } else {
+        // Otherwise, activate the first selectable node
+        const firstSelectableNode = getFirstSelectableNode(memoTreeData);
+        if (firstSelectableNode) {
+          setActiveKey(firstSelectableNode[fieldNames.value]);
+        }
+      }
     }
     // 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 +167,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 +176,35 @@ const OptionList: React.ForwardRefRenderFunction<ReviseRefOptionListProps> = (_,
     }
   };
 
-  // ========================== Events ==========================
-  const onListMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
-    event.preventDefault();
-  };
-
-  const onInternalSelect = (__: Key[], info: TreeEventInfo) => {
-    const { node } = info;
-
-    if (checkable && isCheckDisabled(node)) {
-      return;
+  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;
+  };
 
-    onSelect(node.key, {
-      selected: !checkedKeys.includes(node.key),
-    });
+  // =========================== Search Effect ===========================
+  React.useEffect(() => {
+    if (searchValue) {
+      setSearchExpandedKeys(getAllKeys(treeData, fieldNames));
 
-    if (!multiple) {
-      toggleOpen(false);
+      const firstMatchNode = getFirstMatchNode(memoTreeData);
+      if (firstMatchNode) {
+        setActiveKey(firstMatchNode[fieldNames.value]);
+      } else {
+        setActiveKey(null);
+      }
     }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchValue]);
 
   // ========================= Keyboard =========================
   React.useImperativeHandle(ref, () => ({
@@ -176,8 +223,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 +244,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,96 @@ 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 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);
+    });
+  });
 });

tests/Select.spec.tsx

@@ -438,13 +438,13 @@ describe('TreeSelect.basic', () => {
       keyUp(KeyCode.DOWN);
       keyDown(KeyCode.ENTER);
       keyUp(KeyCode.ENTER);
-      matchValue(['parent']);
+      matchValue(['child']);
 
       keyDown(KeyCode.UP);
       keyUp(KeyCode.UP);
       keyDown(KeyCode.ENTER);
       keyUp(KeyCode.ENTER);
-      matchValue(['parent', 'child']);
+      matchValue(['child', 'parent']);
     });
 
     it('selectable works with keyboard operations', () => {
@@ -467,12 +467,12 @@ describe('TreeSelect.basic', () => {
 
       keyDown(KeyCode.DOWN);
       keyDown(KeyCode.ENTER);
-      expect(onChange).toHaveBeenCalledWith(['parent'], expect.anything(), expect.anything());
-      onChange.mockReset();
+      expect(onChange).not.toHaveBeenCalled();
 
       keyDown(KeyCode.UP);
       keyDown(KeyCode.ENTER);
-      expect(onChange).not.toHaveBeenCalled();
+      expect(onChange).toHaveBeenCalledWith(['parent'], expect.anything(), expect.anything());
+      onChange.mockReset();
     });
 
     it('active index matches value', () => {
@@ -535,6 +535,24 @@ describe('TreeSelect.basic', () => {
       keyDown(KeyCode.UP);
       expect(wrapper.find('.rc-tree-select-tree-treenode-active').text()).toBe('11 label');
     });
+
+    it('should active first option when dropdown is opened', () => {
+      const treeData = [
+        { key: '0', value: '0', title: '0 label', disabled: true },
+        { key: '1', value: '1', title: '1 label' },
+        { key: '2', value: '2', title: '2 label' },
+      ];
+
+      const wrapper = mount(<TreeSelect treeData={treeData} />);
+
+      expect(wrapper.find('.rc-tree-select-tree-treenode-active')).toHaveLength(0);
+
+      wrapper.openSelect();
+
+      const activeNode = wrapper.find('.rc-tree-select-tree-treenode-active');
+      expect(activeNode).toHaveLength(1);
+      expect(activeNode.text()).toBe('0 label');
+    });
   });
 
   it('click in list should preventDefault', () => {
@@ -591,21 +609,21 @@ describe('TreeSelect.basic', () => {
     expect(container.querySelector('.rc-tree-select-selector').textContent).toBe('parent 1-0');
   });
 
-  it('should not add new tag when key enter is pressed if nothing is active', () => {
-    const onSelect = jest.fn();
-
-    const wrapper = mount(
-      <TreeSelect open treeDefaultExpandAll multiple onSelect={onSelect}>
-        <TreeNode value="parent 1-0" title="parent 1-0">
-          <TreeNode value="leaf1" title="my leaf" disabled />
-          <TreeNode value="leaf2" title="your leaf" disabled />
-        </TreeNode>
-      </TreeSelect>,
-    );
-
-    wrapper.find('input').first().simulate('keydown', { which: KeyCode.ENTER });
-    expect(onSelect).not.toHaveBeenCalled();
-  });
+  // it('should not add new tag when key enter is pressed if nothing is active', () => {
+  //   const onSelect = jest.fn();
+
+  //   const wrapper = mount(
+  //     <TreeSelect open treeDefaultExpandAll multiple onSelect={onSelect}>
+  //       <TreeNode value="parent 1-0" title="parent 1-0">
+  //         <TreeNode value="leaf1" title="my leaf" disabled />
+  //         <TreeNode value="leaf2" title="your leaf" disabled />
+  //       </TreeNode>
+  //     </TreeSelect>,
+  //   );
+
+  //   wrapper.find('input').first().simulate('keydown', { which: KeyCode.ENTER });
+  //   expect(onSelect).not.toHaveBeenCalled();
+  // });
 
   it('should not select parent if some children is disabled', () => {
     const onChange = jest.fn();