React-Select组件打开菜单时焦点跳至页面首个输入框求助

可能的原因及对应解决方案 #

1. 修复useMemo依赖缺失导致的不必要重渲染

你的using_options的useMemo依赖项遗漏了labels，这会导致labels更新时选项不刷新，同时可能引发组件异常重渲染，进而干扰焦点管理。修改如下：

const using_options = useMemo(
  () => options.map((value, i) => ({ value, label: labels[i] })),
  [options, labels] // 补充labels依赖
);

// 把选中项的计算也缓存起来，避免每次渲染都执行find
const selectedOption = useMemo(
  () => using_options.find((op) => op.value === value),
  [using_options, value]
);

然后在Select组件中用selectedOption替代直接的find调用：

value={selectedOption}

2. 处理menuPortalTarget引发的焦点脱离问题

由于菜单挂载到document.body，脱离了原表单的DOM上下文，React-Select的焦点逻辑可能和表单的默认行为冲突。可以通过自定义菜单组件阻止默认焦点跳转：

import { components } from 'react-select';

const CustomMenu = ({ innerProps, ...props }) => {
  return (
    <components.Menu
      {...props}
      innerProps={{
        ...innerProps,
        // 阻止mousedown事件触发的默认焦点切换
        onMouseDown: (e) => {
          e.preventDefault();
          innerProps.onMouseDown?.(e);
        }
      }}
    />
  );
};

然后在Select中引入自定义菜单：

<Select
  // ...其他props
  components={{ Menu: CustomMenu }}
/>

3. 排查表单库的自动聚焦逻辑

如果你用了react-hook-form这类库，检查是否存在表单自动聚焦首个输入框的配置：

• 确认没有给表单或其他输入框设置autoFocus属性
• 如果用了Controller，尝试添加shouldUnregister={false}避免组件卸载重挂载引发的焦点跳转

4. 临时移除onBlur排查问题

如果你的onBlur回调中包含表单校验、状态更新等逻辑，可能会触发组件重渲染导致焦点丢失。先临时注释onBlur={onBlur}，验证是否是这个回调引发的问题，再逐步调整回调逻辑。

5. 禁用React-Select的自动聚焦行为

尝试给Select添加autoFocus={false}，并确保菜单打开时焦点锁定在组件内部：

<Select
  // ...其他props
  autoFocus={false}
  menuFocusTarget="select" // 指定菜单打开时焦点回到选择器本身
/>

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