fix: 修复因子key相同导致搜索时激活项展示异常问题 (#390)

kiner-tang · web-flow · commit 3e0eaa9dcb30 · 2023-02-20T17:29:46.000+08:00
* fix: 修复因子key相同导致搜索时激活项展示异常问题

* feat: add demo

* style: code style

* style: code style

* feat: optimize code
diff --git a/docs/demo/search.md b/docs/demo/search.md
@@ -0,0 +1,8 @@
+---
+title: search
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../../examples/search.tsx"></code>
diff --git a/examples/search.tsx b/examples/search.tsx
@@ -0,0 +1,75 @@
+/* eslint-disable no-console */
+import React from 'react';
+import '../assets/index.less';
+import Cascader from '../src';
+
+const addressOptions = [
+  {
+    label: '福建',
+    value: 'fj',
+    children: [
+      {
+        label: '福州',
+        value: 'fuzhou',
+        children: [
+          {
+            label: '马尾',
+            value: 'mawei',
+          },
+        ],
+      },
+      {
+        label: '泉州',
+        value: 'quanzhou',
+      },
+    ],
+  },
+  {
+    label: '浙江',
+    value: 'zj',
+    children: [
+      {
+        label: '杭州',
+        value: 'hangzhou',
+        children: [
+          {
+            label: '余杭',
+            value: 'yuhang',
+          },
+          {
+            label: '福州',
+            value: 'fuzhou',
+            children: [
+              {
+                label: '马尾',
+                value: 'mawei',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: '北京',
+    value: 'bj',
+    children: [
+      {
+        label: '朝阳区',
+        value: 'chaoyang',
+      },
+      {
+        label: '海淀区',
+        value: 'haidian',
+      },
+    ],
+  },
+];
+
+class Demo extends React.Component {
+  render() {
+    return <Cascader options={addressOptions} showSearch />;
+  }
+}
+
+export default Demo;
diff --git a/src/OptionList/Column.tsx b/src/OptionList/Column.tsx
@@ -138,7 +138,8 @@ export default function Column({
               key={fullPathKey}
               className={classNames(menuItemPrefixCls, {
                 [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
-                [`${menuItemPrefixCls}-active`]: activeValue === value,
+                [`${menuItemPrefixCls}-active`]:
+                  activeValue === value || activeValue === fullPathKey,
                 [`${menuItemPrefixCls}-disabled`]: disabled,
                 [`${menuItemPrefixCls}-loading`]: isLoading,
               })}
diff --git a/src/OptionList/index.tsx b/src/OptionList/index.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import type { DefaultOptionType, SingleValueType } from '../Cascader';
 import CascaderContext from '../context';
 import {
+  getFullPathKeys,
   isLeaf,
   scrollIntoParentView,
   toPathKey,
@@ -122,10 +123,14 @@ const RefOptionList = React.forwardRef<RefOptionListProps>((props, ref) => {
     const optionList = [{ options: mergedOptions }];
     let currentList = mergedOptions;
 
+    const fullPathKeys = getFullPathKeys(currentList, fieldNames);
+
     for (let i = 0; i < activeValueCells.length; i += 1) {
       const activeValueCell = activeValueCells[i];
       const currentOption = currentList.find(
-        option => option[fieldNames.value] === activeValueCell,
+        (option, index) =>
+          (fullPathKeys[index] ? toPathKey(fullPathKeys[index]) : option[fieldNames.value]) ===
+          activeValueCell,
       );
 
       const subOptions = currentOption?.[fieldNames.children];
diff --git a/src/OptionList/useKeyboard.ts b/src/OptionList/useKeyboard.ts
@@ -1,9 +1,10 @@
-import * as React from 'react';
-import type { RefOptionListProps } from 'rc-select/lib/OptionList';
 import { useBaseProps } from 'rc-select';
+import type { RefOptionListProps } from 'rc-select/lib/OptionList';
 import KeyCode from 'rc-util/lib/KeyCode';
+import * as React from 'react';
 import type { DefaultOptionType, InternalFieldNames, SingleValueType } from '../Cascader';
 import { SEARCH_MARK } from '../hooks/useSearchOptions';
+import { getFullPathKeys, toPathKey } from '../utils/commonUtil';
 
 export default (
   ref: React.Ref<RefOptionListProps>,
@@ -16,41 +17,46 @@ export default (
   const { direction, searchValue, toggleOpen, open } = useBaseProps();
   const rtl = direction === 'rtl';
 
-  const [validActiveValueCells, lastActiveIndex, lastActiveOptions] = React.useMemo(() => {
-    let activeIndex = -1;
-    let currentOptions = options;
+  const [validActiveValueCells, lastActiveIndex, lastActiveOptions, fullPathKeys] =
+    React.useMemo(() => {
+      let activeIndex = -1;
+      let currentOptions = options;
 
-    const mergedActiveIndexes: number[] = [];
-    const mergedActiveValueCells: React.Key[] = [];
+      const mergedActiveIndexes: number[] = [];
+      const mergedActiveValueCells: React.Key[] = [];
 
-    const len = activeValueCells.length;
+      const len = activeValueCells.length;
 
-    // Fill validate active value cells and index
-    for (let i = 0; i < len && currentOptions; i += 1) {
-      // Mark the active index for current options
-      const nextActiveIndex = currentOptions.findIndex(
-        option => option[fieldNames.value] === activeValueCells[i],
-      );
+      const pathKeys = getFullPathKeys(options, fieldNames);
 
-      if (nextActiveIndex === -1) {
-        break;
-      }
+      // Fill validate active value cells and index
+      for (let i = 0; i < len && currentOptions; i += 1) {
+        // Mark the active index for current options
+        const nextActiveIndex = currentOptions.findIndex(
+          (option, index) =>
+            (pathKeys[index] ? toPathKey(pathKeys[index]) : option[fieldNames.value]) ===
+            activeValueCells[i],
+        );
 
-      activeIndex = nextActiveIndex;
-      mergedActiveIndexes.push(activeIndex);
-      mergedActiveValueCells.push(activeValueCells[i]);
+        if (nextActiveIndex === -1) {
+          break;
+        }
 
-      currentOptions = currentOptions[activeIndex][fieldNames.children];
-    }
+        activeIndex = nextActiveIndex;
+        mergedActiveIndexes.push(activeIndex);
+        mergedActiveValueCells.push(activeValueCells[i]);
 
-    // Fill last active options
-    let activeOptions = options;
-    for (let i = 0; i < mergedActiveIndexes.length - 1; i += 1) {
-      activeOptions = activeOptions[mergedActiveIndexes[i]][fieldNames.children];
-    }
+        currentOptions = currentOptions[activeIndex][fieldNames.children];
+      }
 
-    return [mergedActiveValueCells, activeIndex, activeOptions];
-  }, [activeValueCells, fieldNames, options]);
+      // Fill last active options
+      let activeOptions = options;
+      for (let i = 0; i < mergedActiveIndexes.length - 1; i += 1) {
+        activeOptions = activeOptions[mergedActiveIndexes[i]][fieldNames.children];
+      }
+
+      return [mergedActiveValueCells, activeIndex, activeOptions, pathKeys];
+    }, [activeValueCells, fieldNames, options]);
 
   // Update active value cells and scroll to target element
   const internalSetActiveValueCells = (next: React.Key[]) => {
@@ -69,10 +75,14 @@ export default (
     for (let i = 0; i < len; i += 1) {
       currentIndex = (currentIndex + offset + len) % len;
       const option = lastActiveOptions[currentIndex];
-
       if (option && !option.disabled) {
-        const value = option[fieldNames.value];
-        const nextActiveCells = validActiveValueCells.slice(0, -1).concat(value);
+        const nextActiveCells = validActiveValueCells
+          .slice(0, -1)
+          .concat(
+            fullPathKeys[currentIndex]
+              ? toPathKey(fullPathKeys[currentIndex])
+              : option[fieldNames.value],
+          );
         internalSetActiveValueCells(nextActiveCells);
         return;
       }
diff --git a/src/utils/commonUtil.ts b/src/utils/commonUtil.ts
@@ -1,3 +1,4 @@
+import { SEARCH_MARK } from '../hooks/useSearchOptions';
 import type {
   DefaultOptionType,
   FieldNames,
@@ -49,3 +50,7 @@ export function scrollIntoParentView(element: HTMLElement) {
     parent.scrollTo({ top: elementToParent + element.offsetHeight - parent.offsetHeight });
   }
 }
+
+export function getFullPathKeys(options: DefaultOptionType[], fieldNames: FieldNames) {
+  return options.map(item => item[SEARCH_MARK]?.map(opt => opt[fieldNames.value]));
+}
diff --git a/tests/demoOptions.ts b/tests/demoOptions.ts
@@ -70,6 +70,16 @@ export const addressOptions: DefaultOptionType[] = [
           },
         ],
       },
+      {
+        label: '福州',
+        value: 'fuzhou',
+        children: [
+          {
+            label: '马尾',
+            value: 'mawei',
+          },
+        ],
+      },
     ],
   },
   {
diff --git a/tests/keyboard.spec.tsx b/tests/keyboard.spec.tsx
@@ -94,6 +94,24 @@ describe('Cascader.Keyboard', () => {
       addressOptions[1].children[0].children[0],
     ]);
   });
+  it('enter on search when has same sub key', () => {
+    wrapper.find('input').simulate('change', { target: { value: '福' } });
+    wrapper.find('input').simulate('keyDown', { which: KeyCode.DOWN });
+    expect(wrapper.find('.rc-cascader-menu-item-active').length).toBe(1);
+    expect(
+      wrapper.find('.rc-cascader-menu-item-active .rc-cascader-menu-item-content').last().text(),
+    ).toEqual('福建 / 福州 / 马尾');
+    wrapper.find('input').simulate('keyDown', { which: KeyCode.DOWN });
+    expect(wrapper.find('.rc-cascader-menu-item-active').length).toBe(1);
+    expect(
+      wrapper.find('.rc-cascader-menu-item-active .rc-cascader-menu-item-content').last().text(),
+    ).toEqual('福建 / 泉州');
+    wrapper.find('input').simulate('keyDown', { which: KeyCode.DOWN });
+    expect(wrapper.find('.rc-cascader-menu-item-active').length).toBe(1);
+    expect(
+      wrapper.find('.rc-cascader-menu-item-active .rc-cascader-menu-item-content').last().text(),
+    ).toEqual('浙江 / 福州 / 马尾');
+  });
 
   it('rtl', () => {
     wrapper = mount(<Cascader options={addressOptions} onChange={onChange} direction="rtl" />);

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import { SEARCH_MARK } from '../hooks/useSearchOptions';`
`1`	`2`	`import type {`
`2`	`3`	`DefaultOptionType,`
`3`	`4`	`FieldNames,`
`@@ -49,3 +50,7 @@ export function scrollIntoParentView(element: HTMLElement) {`
`49`	`50`	`parent.scrollTo({ top: elementToParent + element.offsetHeight - parent.offsetHeight });`
`50`	`51`	`}`
`51`	`52`	`}`
	`53`	`+`
	`54`	`+export function getFullPathKeys(options: DefaultOptionType[], fieldNames: FieldNames) {`
	`55`	`+ return options.map(item => item[SEARCH_MARK]?.map(opt => opt[fieldNames.value]));`
	`56`	`+}`