Fix:The dropdown list is not following the highlighted item when navigating through the result using up or down arrow after entering keyword (#575)

* fix:cascaderScroll

* fix:cascader

* fix: cascader

* fix: cascader

* fix: cascader

* fix: cascader

* fix: cascader

* fix: cascader

---------

Co-authored-by: WB01676250 <[email protected]>

Author: jin19980928

src/OptionList/Column.tsx

@@ -43,6 +43,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
 }: ColumnProps<OptionType>) {
   const menuPrefixCls = `${prefixCls}-menu`;
   const menuItemPrefixCls = `${prefixCls}-menu-item`;
+  const menuRef = React.useRef<HTMLUListElement>(null);
 
   const {
     fieldNames,
@@ -100,9 +101,23 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
     [options, checkedSet, fieldNames, halfCheckedSet, loadingKeys, prevValuePath],
   );
 
+  React.useEffect(() => {
+    if (menuRef.current) {
+      const selector = `.${menuItemPrefixCls}-active`;
+      const activeElement = menuRef.current.querySelector<HTMLElement>(selector);
+
+      if (activeElement) {
+        activeElement.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+        });
+      }
+    }
+  }, [activeValue, menuItemPrefixCls]);
+
   // ============================ Render ============================
   return (
-    <ul className={menuPrefixCls} role="menu">
+    <ul className={menuPrefixCls} ref={menuRef} role="menu">
       {optionInfoList.map(
         ({
           disabled,

tests/index.spec.tsx

@@ -6,6 +6,7 @@ import { addressOptions, addressOptionsForUneven, optionsForActiveMenuItems } fr
 import { mount } from './enzyme';
 import { toRawValues } from '../src/utils/commonUtil';
 import { fireEvent, render } from '@testing-library/react';
+import KeyCode from '@rc-component/util/lib/KeyCode';
 
 describe('Cascader.Basic', () => {
   let selectedValue: any;
@@ -995,6 +996,7 @@ 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, {
@@ -1074,6 +1076,34 @@ describe('Cascader.Basic', () => {
 
       spyElement.mockRestore();
     });
+
+    it('should scroll into view when navigating with keyboard', () => {
+      const { container } = render(
+        <Cascader
+          options={Array.from({ length: 20 }).map((_, index) => ({
+            value: `item-${index}`,
+            label: `item-${index}`,
+          }))}
+          open
+        />,
+      );
+
+      const input = container.querySelector('input')!;
+      fireEvent.focus(input);
+
+      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();
+    });
   });
 
   it('not crash when value type is not array', () => {

tests/setup.js

@@ -25,3 +25,5 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
     return this;
   },
 });
+
+window.HTMLElement.prototype.scrollIntoView = jest.fn();