fix: use scrollIntoParentView to prevent page scroll (#633)

Author: tuzixiangs

src/OptionList/Column.tsx

@@ -4,7 +4,7 @@ import pickAttrs from '@rc-component/util/lib/pickAttrs';
 import type { DefaultOptionType, SingleValueType } from '../Cascader';
 import CascaderContext from '../context';
 import { SEARCH_MARK } from '../hooks/useSearchOptions';
-import { isLeaf, toPathKey } from '../utils/commonUtil';
+import { isLeaf, scrollIntoParentView, toPathKey } from '../utils/commonUtil';
 import Checkbox from './Checkbox';
 
 export const FIX_LABEL = '__cascader_fix_label__';
@@ -110,10 +110,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
       const activeElement = menuRef.current.querySelector<HTMLElement>(selector);
 
       if (activeElement) {
-        activeElement.scrollIntoView({
-          block: 'nearest',
-          inline: 'nearest',
-        });
+        scrollIntoParentView(activeElement);
       }
     }
   }, [activeValue, menuItemPrefixCls]);

src/utils/commonUtil.ts

@@ -53,7 +53,9 @@ export function scrollIntoParentView(element: HTMLElement) {
   const elementToParent = element.offsetTop - parent.offsetTop; // offsetParent may not be parent.
   if (elementToParent - parent.scrollTop < 0) {
     parent.scrollTo({ top: elementToParent });
-  } else if (elementToParent + element.offsetHeight - parent.scrollTop > parent.offsetHeight) {
+  } else if (
+    elementToParent + element.offsetHeight - parent.scrollTop > parent.offsetHeight
+  ) {
     parent.scrollTo({ top: elementToParent + element.offsetHeight - parent.offsetHeight });
   }
 }

tests/index.spec.tsx

@@ -4,7 +4,7 @@ import type { CascaderRef, BaseOptionType, CascaderProps } from '../src';
 import Cascader from '../src';
 import { addressOptions, addressOptionsForUneven, optionsForActiveMenuItems } from './demoOptions';
 import { mount } from './enzyme';
-import { toRawValues } from '../src/utils/commonUtil';
+import * as commonUtil from '../src/utils/commonUtil';
 import { act, fireEvent, render } from '@testing-library/react';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import { expectOpen, selectOption } from './util';
@@ -1075,7 +1075,7 @@ describe('Cascader.Basic', () => {
       });
       const items = wrapper.container.querySelectorAll('.rc-cascader-menu-item');
       fireEvent.mouseEnter(items[9]);
-      expect(mockScrollTo).toHaveBeenCalledTimes(0);
+      expect(mockScrollTo).toHaveBeenCalledTimes(1);
 
       spyElement.mockRestore();
     });
@@ -1094,18 +1094,12 @@ describe('Cascader.Basic', () => {
       const input = container.querySelector('input')!;
       fireEvent.focus(input);
 
+      const spy = jest.spyOn(commonUtil, 'scrollIntoParentView');
       fireEvent.keyDown(input, { key: 'ArrowDown', keyCode: KeyCode.DOWN });
 
       const targetElement = container.querySelector('.rc-cascader-menu-item-active')!;
-
-      const scrollSpy = jest.spyOn(targetElement, 'scrollIntoView').mockImplementation(() => null);
-
-      expect(scrollSpy).toHaveBeenCalledWith({
-        block: 'nearest',
-        inline: 'nearest',
-      });
-
-      scrollSpy.mockReset();
+      expect(spy).toHaveBeenCalledWith(targetElement);
+      spy.mockRestore();
     });
   });
 
@@ -1149,7 +1143,7 @@ describe('Cascader.Basic', () => {
     errorSpy.mockReset();
   });
   it('toRawValues undefined', () => {
-    expect(toRawValues()).toEqual([]);
+    expect(commonUtil.toRawValues()).toEqual([]);
   });
 
   it('nativeElement', () => {