为什么react-select的焦点即便光标在其他选项也会移到第一个元素？

异常表现 #

在使用react-select ^4.3.0版本开发多选下拉组件时，即使光标已经移动到下拉列表的其他选项上，组件焦点也会强制跳转到列表第一个元素，导致交互异常。
基础复现代码结构如下：

<Select 
  defaultValue={[options[4], options[5]]}
  name="clothes"
  options={options}
  isMulti
  onChange={handleChange}
/>

修复方案 #

1. 解决引用变动触发的强制焦点重置 #

该异常很大概率和options数组的引用变动直接相关：如果每次组件重渲染时options都是重新生成的数组引用，会触发下拉选项列表的完全重渲染，进而触发组件内置逻辑自动将焦点重置到列表第一个元素。
可以通过以下方式修正：

• 使用useMemo对传入的options数组做缓存，固定数组引用地址，避免组件无意义重渲染时触发列表重绘
• 给Select组件补充autoFocus={false}配置，关闭组件挂载阶段默认抢占焦点的内置逻辑

2. 版本适配修复 #

react-select 4.3.0版本本身存在焦点逻辑的已知bug，在不强制绑定4.3.0版本的前提下，可以升级到4.3.1及以上的同大版本补丁包，该版本已经修正了列表交互过程中焦点错位跳转到首个元素的问题，不需要额外开发自定义逻辑。

3. 锁定4.3.0版本的兜底处理 #

如果业务有强制版本要求必须使用4.3.0版本，可以通过自定义菜单组件的方式覆盖内置的焦点逻辑：

• 从react-select导出的components中扩展默认的Option组件，重写其聚焦判断逻辑，取消列表渲染完成后自动聚焦第一个选项的内置行为
• 在菜单打开的回调中，通过定时器延迟移除首个选项的默认焦点选中态，将焦点交还到用户实际交互的选项上

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