fix: search no scroll (#532)

Co-authored-by: afc163 <[email protected]>
react-component · Sep 3, 2024 · f5669c6 · f5669c6
1 parent c75437d
commit f5669c6
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 6 deletions.
diff --git a/src/OptionList/Column.tsx b/src/OptionList/Column.tsx
@@ -23,7 +23,6 @@ export interface ColumnProps<OptionType extends DefaultOptionType = DefaultOptio
   halfCheckedSet: Set<React.Key>;
   loadingKeys: React.Key[];
   isSelectable: (option: DefaultOptionType) => boolean;
-  searchValue?: string;
 }
 
 export default function Column<OptionType extends DefaultOptionType = DefaultOptionType>({
@@ -39,7 +38,6 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
   halfCheckedSet,
   loadingKeys,
   isSelectable,
-  searchValue,
 }: ColumnProps<OptionType>) {
   const menuPrefixCls = `${prefixCls}-menu`;
   const menuItemPrefixCls = `${prefixCls}-menu-item`;
@@ -117,7 +115,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
         }) => {
           // >>>>> Open
           const triggerOpenPath = () => {
-            if (disabled || searchValue) {
+            if (disabled) {
               return;
             }
             const nextValueCells = [...fullPath];

diff --git a/src/OptionList/List.tsx b/src/OptionList/List.tsx
@@ -166,6 +166,9 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
 
   // >>>>> Active Scroll
   React.useEffect(() => {
+    if (searchValue) {
+      return;
+    }
     for (let i = 0; i < activeValueCells.length; i += 1) {
       const cellPath = activeValueCells.slice(0, i + 1);
       const cellKeyPath = toPathKey(cellPath);
@@ -176,7 +179,7 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
         scrollIntoParentView(ele);
       }
     }
-  }, [activeValueCells]);
+  }, [activeValueCells, searchValue]);
 
   // ========================== Render ==========================
   // >>>>> Empty
@@ -213,7 +216,6 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
       <Column
         key={index}
         {...columnProps}
-        searchValue={searchValue}
         prefixCls={mergedPrefixCls}
         options={col.options}
         prevValuePath={prevValuePath}

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -6,7 +6,7 @@ import Cascader from '../src';
 import { addressOptions, addressOptionsForUneven, optionsForActiveMenuItems } from './demoOptions';
 import { mount } from './enzyme';
 import { toRawValues } from '../src/utils/commonUtil';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 describe('Cascader.Basic', () => {
   let selectedValue: any;
@@ -1022,6 +1022,85 @@ describe('Cascader.Basic', () => {
       wrapper.find(`li[data-path-key]`).at(0).simulate('click');
       wrapper.find(`li[data-path-key]`).at(1).simulate('click');
     });
+    it('hover + search', () => {
+      let getOffesetTopTimes = 0;
+      const spyElement = spyElementPrototypes(HTMLElement, {
+        offsetTop: {
+          get: () => (getOffesetTopTimes++ % 2 === 0 ? 100 : 0),
+        },
+        scrollTop: {
+          get: () => 0,
+        },
+        offsetHeight: {
+          get: () => 10,
+        },
+      });
+
+      const wrapper = render(
+        <Cascader
+          expandTrigger="hover"
+          options={[
+            {
+              label: 'Women Clothing',
+              value: '1',
+              children: [
+                {
+                  label: 'Women Tops, Blouses & Tee',
+                  value: '11',
+                  children: [
+                    {
+                      label: 'Women T-Shirts',
+                      value: '111',
+                    },
+                    {
+                      label: 'Women Tops',
+                      value: '112',
+                    },
+                    {
+                      label: 'Women Tank Tops & Camis',
+                      value: '113',
+                    },
+                    {
+                      label: 'Women Blouses',
+                      value: '114',
+                    },
+                  ],
+                },
+                {
+                  label: 'Women Suits',
+                  value: '2',
+                  children: [
+                    {
+                      label: 'Women Suit Pants',
+                      value: '21',
+                    },
+                    {
+                      label: 'Women Suit Sets',
+                      value: '22',
+                    },
+                    {
+                      label: 'Women Blazers',
+                      value: '23',
+                    },
+                  ],
+                },
+              ],
+            },
+          ]}
+          showSearch
+          checkable
+          open
+        />,
+      );
+      fireEvent.change(wrapper.container.querySelector('input') as HTMLElement, {
+        target: { value: 'w' },
+      });
+      const items = wrapper.container.querySelectorAll('.rc-cascader-menu-item');
+      fireEvent.mouseEnter(items[9]);
+      expect(mockScrollTo).toHaveBeenCalledTimes(0);
+
+      spyElement.mockRestore();
+    });
   });
 
   it('not crash when value type is not array', () => {