Ant Design Select下拉菜单删除选项时自动关闭问题如何解决

Ant Design Select 组件默认在 mousedown 事件阶段监听下拉容器内的交互，只要点击事件冒泡到组件根监听节点、命中默认关闭规则，就会自动收起下拉。给选项单独加删除按钮时，点击事件没有被拦截，直接触发了组件内置的关闭逻辑，才会出现点删除就关下拉的问题。组件本身确实没有提供内置的下拉内选项删除方法，选项的增删本身就是由开发者通过维护 options 数据源自行控制的。

方案1：单删除按钮拦截事件（最常用，适合仅给选项加删除操作的场景） #

核心是在删除按钮上提前拦截 mousedown 阶段的事件冒泡，不要让事件传到Select的内置监听层，注意不要只拦截click事件——Select的关闭逻辑触发早于click事件，仅拦click没有效果。
示例代码：

import { Select, Button } from 'antd';
import { useState } from 'react';

export default function Demo() {
  const [options, setOptions] = useState([
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 },
    { label: '选项3', value: 3 },
  ]);

  const handleDelete = (e, deleteVal) => {
    e.stopPropagation();
    // 正常写删除逻辑，更新options数据源即可
    setOptions(prev => prev.filter(opt => opt.value !== deleteVal));
  };

  return (
    <Select
      style={{ width: 240 }}
      options={options}
      optionRender={(option) => (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>{option.data.label}</span>
          <Button
            size="small"
            type="link"
            danger
            // 核心：mousedown阶段就阻止冒泡，避免触发下拉关闭
            onMouseDown={(e) => e.stopPropagation()}
            onClick={(e) => handleDelete(e, option.data.value)}
          >
            删除
          </Button>
        </div>
      )}
    />
  );
}

方案2：自定义下拉根容器拦截默认行为（适合用dropdownRender做全自定义下拉的场景） #

如果你是通过dropdownRender接口自定义整个下拉面板内容，可以直接在自定义面板的最外层DOM上拦截mousedown默认行为，面板内所有交互都不会意外触发下拉关闭。
示例代码：

<Select
  style={{ width: 240 }}
  options={options}
  dropdownRender={(menu) => (
    <div
      // 核心：拦截mousedown默认行为，阻断Select内置的关闭判断
      onMouseDown={(e) => e.preventDefault()}
    >
      {/* 原有选项菜单 */}
      {menu}
      {/* 自定义的其他操作区，比如新增、批量删除按钮都可以放这里 */}
      <div style={{ padding: '8px', borderTop: '1px solid #f0f0f0' }}>
        <Button size="small" type="primary">新增选项</Button>
      </div>
    </div>
  )}
/>

• 加了事件拦截后，如果需要在某个操作完成后手动关闭下拉，可以通过受控open属性控制下拉显隐，或者调用Select实例的blur()方法触发关闭。
• 不要试图找组件内置的删除选项API，Antd Select本身是数据驱动的，所有选项的增删改都通过维护传入的options数组实现即可。

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