Antd Select组件：重新打开时如何重置下拉菜单滚动位置

问题描述 #

使用Antd的Select组件（tags模式）时存在以下不符合预期的行为：

• 打开Select并将下拉菜单滚动到底部
• 点击组件外部关闭后重新打开，下拉菜单仍停留在之前的滚动位置
• 预期效果：重新打开Select时，下拉菜单自动回到初始顶部位置

解决方案 #

可以通过自定义下拉容器并监听组件展开状态，强制重置滚动位置来实现需求。以下是具体实现代码：

import React, { useState, useEffect, useRef } from 'react';
import './index.css';
import { Select } from 'antd';
import type { SelectProps } from 'antd';

const options: SelectProps['options'] = [];

for (let i = 10; i < 36; i++) {
  options.push({
    value: i.toString(36) + i,
    label: i.toString(36) + i,
  });
}

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const App: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownContainerRef = useRef<HTMLDivElement>(null);

  // 监听展开状态，打开时重置滚动位置
  useEffect(() => {
    if (isOpen && dropdownContainerRef.current) {
      dropdownContainerRef.current.scrollTop = 0;
    }
  }, [isOpen]);

  return (
    <Select
      mode="tags"
      style={{ width: '100%' }}
      onChange={handleChange}
      tokenSeparators={[',']}
      options={options}
      open={isOpen}
      onOpenChange={(openStatus) => setIsOpen(openStatus)}
      dropdownRender={(menu) => (
        <div 
          ref={dropdownContainerRef} 
          style={{ maxHeight: '250px', overflowY: 'auto' }}
        >
          {menu}
        </div>
      )}
    />
  );
};

export default App;

代码说明 #

1. 绑定展开状态：通过useState维护Select的open属性，用onOpenChange同步组件的展开/收起状态
2. 获取下拉容器节点：使用useRef获取自定义的下拉菜单容器DOM节点，避免依赖Antd内部DOM结构
3. 强制重置滚动：在useEffect中监听展开状态变化，当组件打开时，将容器的scrollTop设为0，强制滚动到顶部

此方案稳定性高，能确保每次打开Select时下拉菜单都回到顶部位置，符合预期需求。

内容的提问来源于stack exchange，提问作者CCCC