fix: TreeSelect keyboard navigation has inconsistent focusing (#433)

* fix: TreeSelect keyboard navigation has inconsistent focusing

* chore: reorder

---------

Co-authored-by: flyFatSeal <@flyFatSeal>
Co-authored-by: 二货机器人 <[email protected]>

Author: flyFatSeal

src/OptionList.tsx

@@ -72,6 +72,10 @@ const OptionList: React.RefForwardingComponent<ReviseRefOptionListProps> = (_, r
     (prev, next) => next[0] && prev[1] !== next[1],
   );
 
+  // ========================== Active ==========================
+  const [activeKey, setActiveKey] = React.useState<Key>(null);
+  const activeEntity = keyEntities[activeKey];
+
   // ========================== Values ==========================
   const mergedCheckedKeys = React.useMemo(() => {
     if (!checkable) {
@@ -89,6 +93,7 @@ const OptionList: React.RefForwardingComponent<ReviseRefOptionListProps> = (_, r
     // Single mode should scroll to current key
     if (open && !multiple && checkedKeys.length) {
       treeRef.current?.scrollTo({ key: checkedKeys[0] });
+      setActiveKey(checkedKeys[0]);
     }
   }, [open]);
 
@@ -149,9 +154,6 @@ const OptionList: React.RefForwardingComponent<ReviseRefOptionListProps> = (_, r
   };
 
   // ========================= Keyboard =========================
-  const [activeKey, setActiveKey] = React.useState<Key>(null);
-  const activeEntity = keyEntities[activeKey];
-
   React.useImperativeHandle(ref, () => ({
     scrollTo: treeRef.current?.scrollTo,
     onKeyDown: event => {

tests/Select.spec.tsx

@@ -468,6 +468,67 @@ describe('TreeSelect.basic', () => {
       keyDown(KeyCode.ENTER);
       expect(onChange).not.toHaveBeenCalled();
     });
+
+    it('active index matches value', () => {
+      const wrapper = mount(
+        <TreeSelect
+          value={['10']}
+          treeDefaultExpandAll
+          treeData={[
+            { key: '0', value: '0', title: '0 label' },
+            {
+              key: '1',
+              value: '1',
+              title: '1 label',
+              children: [
+                { key: '10', value: '10', title: '10 label' },
+                { key: '11', value: '11', title: '11 label' },
+              ],
+            },
+          ]}
+        />,
+      );
+      wrapper.openSelect();
+      expect(wrapper.find('.rc-tree-select-tree-treenode-active').text()).toBe('10 label');
+    });
+
+    it('active index updates correctly with key operation', () => {
+      const wrapper = mount(
+        <TreeSelect
+          value={['10']}
+          treeDefaultExpandAll
+          treeData={[
+            { key: '0', value: '0', title: '0 label' },
+            {
+              key: '1',
+              value: '1',
+              title: '1 label',
+              children: [
+                { key: '10', value: '10', title: '10 label' },
+                { key: '11', value: '11', title: '11 label' },
+              ],
+            },
+          ]}
+        />,
+      );
+
+      function keyDown(code) {
+        wrapper.find('input').first().simulate('keyDown', { which: code });
+        wrapper.update();
+      }
+
+      wrapper.openSelect();
+      expect(wrapper.find('.rc-tree-select-tree-treenode-active').text()).toBe('10 label');
+
+      keyDown(KeyCode.DOWN);
+      expect(wrapper.find('.rc-tree-select-tree-treenode-active').text()).toBe('11 label');
+
+      keyDown(KeyCode.DOWN);
+      expect(wrapper.find('.rc-tree-select-tree-treenode-active').text()).toBe('0 label');
+      
+      keyDown(KeyCode.UP);
+      expect(wrapper.find('.rc-tree-select-tree-treenode-active').text()).toBe('11 label');
+    });
   });
 
   it('click in list should preventDefault', () => {