如何禁用react-select自动聚焦并保持多选输入焦点在起始位置？

要解决移除选项芯片或点击输入框时焦点自动跳转到最后一个选项的问题，无需调整flex布局样式，直接通过控制输入框焦点的方式即可实现需求，具体步骤如下：

1. 获取输入框Ref #

通过useRef获取react-select内部的输入框DOM元素，用于后续手动控制焦点：

import { useRef } from 'react';
import Select from 'react-select';

function App() {
  const selectInputRef = useRef(null);
  // ...
}

2. 定义焦点定位函数 #

编写函数将焦点强制定位到输入框起始位置，同时设置光标选中范围为0，确保光标在开头：

const focusInputAtStart = () => {
  if (selectInputRef.current) {
    selectInputRef.current.focus();
    selectInputRef.current.setSelectionRange(0, 0);
  }
};

3. 绑定事件并关联Ref #

在Select组件上绑定onChange（移除选项时触发）和onInputFocus（点击输入框时触发）事件，同时将内部输入框Ref关联到我们创建的ref上：

<Select
  ref={(ref) => {
    if (ref) {
      selectInputRef.current = ref.inputRef;
    }
  }}
  isMulti
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
    // 更多选项...
  ]}
  onChange={(newValues) => {
    // 这里可以保留你的原有业务逻辑
    setTimeout(focusInputAtStart, 0);
  }}
  onInputFocus={focusInputAtStart}
  styles={{
    // 确保选项不换行的样式配置
    values: (base) => ({
      ...base,
      flexWrap: 'nowrap',
      overflowX: 'auto',
    }),
    multiValue: (base) => ({
      ...base,
      whiteSpace: 'nowrap',
    }),
  }}
/>

关键说明 #

• 使用setTimeout是为了等待react-select内部DOM更新完成后再执行聚焦操作，避免因DOM未更新导致的焦点控制失效。
• 样式中的flexWrap: 'nowrap'和whiteSpace: 'nowrap'确保选中的选项芯片不会换行，保持横向排列。

内容的提问来源于stack exchange，提问作者Uğurcan Uçar