移动端自定义DropdownIndicator并使用onMenuOpen/onMenuClose时react-select异常

在Web应用中使用react-select实现值输入功能，需根据设计要求自定义DropdownIndicator图标，并依据菜单开闭状态执行动态修改，采用styled-components开发，简化后代码如下：

const DropdownIndicator = (props) => {
  return (
    <components.DropdownIndicator {...props}>
    </components.DropdownIndicator>
  );
};

<S.InputField
  disabled={disabled}
  labelLeft={labelLeft}
  noLabel={!label}
  className={className}
  fieldType={state?.type}
  inputType={state?.inputType}
  notClearable={notClearable}
  extendOnOpen={extendOnOpen && menuIsOpen}
  menuIsOpen={menuIsOpen}
  menuHeight={menuHeight}
>
  <label htmlFor={id}>{label}</label>

  <div className="input-wrapper">
    <Select
      id={id}
      placeholder={'test'}
      components={{ DropdownIndicator }}
      // menuIsOpen={menuIsOpen}
      onMenuOpen={() => {
        console.log('menu opened');
        setMenuIsOpen(() => true);
      }}
      onMenuClose={() => {
        console.log('menu closed');
        setTimeout(() => setMenuIsOpen(() => false), 3000);
      }}
    />
  </div>
</S.InputField>

遇到的问题：点击选择控件区域可正常打开菜单，但点击下拉图标时，菜单刚触发打开就立即关闭，无法保持展开状态；注释掉自定义的components={{ DropdownIndicator }}或onMenuOpen/onMenuClose其中一项，功能即可恢复正常。该异常仅在移动端分辨率下出现，桌面端无此问题，推测与触摸设备的onFocus/onBlur处理逻辑有关，请问该异常原因是什么？是否为react-select的设计缺陷？

异常原因 #

这不是react-select的设计缺陷，而是自定义组件与移动端触摸事件交互时的逻辑冲突：

• 自定义DropdownIndicator丢失默认事件控制：react-select原生的DropdownIndicator会处理点击事件，阻止冒泡或默认行为，避免触发select的blur逻辑。你的自定义组件仅传递props，未继承该事件处理，导致点击图标时事件冒泡触发select失去焦点，进而触发菜单关闭。
• 移动端触摸事件时序差异：触摸设备上，点击图标会先触发触摸事件，若此时select输入框失焦，onBlur会触发，而你在onMenuClose中延迟3秒修改menuIsOpen，导致react-select内部状态与你维护的状态不一致，菜单被强制关闭。
• 受控/非受控状态冲突：虽然注释了menuIsOpen={menuIsOpen}，但手动通过onMenuOpen/onMenuClose修改状态，会和react-select内部的非受控状态产生冲突，移动端触摸交互的时序差异放大了这个问题。

解决办法 #

1. 完善自定义DropdownIndicator的事件处理：手动阻止事件冒泡，同时保留原生组件的点击逻辑：

const DropdownIndicator = (props) => {
  const handleClick = (e) => {
    e.stopPropagation();
    props.onClick?.(e);
  };

  return (
    <components.DropdownIndicator {...props} onClick={handleClick}>
    </components.DropdownIndicator>
  );
};

2. 统一受控状态管理：如果需要延迟关闭逻辑，将menuIsOpen作为受控属性传递给Select，确保内外状态同步：

<Select
  id={id}
  placeholder={'test'}
  components={{ DropdownIndicator }}
  menuIsOpen={menuIsOpen} // 启用受控状态
  onMenuOpen={() => {
    console.log('menu opened');
    setMenuIsOpen(true);
  }}
  onMenuClose={() => {
    console.log('menu closed');
    setTimeout(() => setMenuIsOpen(false), 3000);
  }}
/>

3. 排查外层容器事件：确认input-wrapper或S.InputField没有绑定干扰焦点的触摸事件，比如onTouchStart/onTouchEnd导致的意外失焦。

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