react-select使用react-tooltip加选项tooltip时键盘导航不生效问题咨询

1. 可以控制外层div的HTML属性 #

你使用的是react-select组件，官方提供了两种方式修改外层option容器属性的方案：

• 用components属性自定义Option组件，直接控制外层容器的所有属性
• 用getOptionProps API，直接给所有外层option容器批量注入自定义属性

2. 现有实现的问题 #

你的写法存在两个核心问题：

• react-select默认的键盘导航逻辑只会将焦点落在外层的.select__option容器上，不会向下传递给你自定义的内部div，所以绑定在内部div上的focus事件永远不会被键盘导航触发
• 你在每个option内部都重复渲染了ReactTooltip实例，不仅有性能损耗，还容易出现id匹配异常的问题

3. 修复方案 #

方案一：使用getOptionProps快速实现（最简方案） #

全局只保留一个全局ReactTooltip实例，直接把tooltip相关属性绑定到外层option容器上：

import ReactTooltip from "react-tooltip";
import Select from "react-select";

// 组件内使用
const DemoSelect = () => {
  const updatedOptions = [
    // 你的原有option配置，不需要再在label里写tooltip和内层div
    {value: '<', label: '<', tooltipContent: 'Less than'},
    // 其他选项
  ]
  return (
    <>
      <ReactTooltip
        role="tooltip"
        className="cb-select-tooltip"
        type="info"
        place="right"
        effect="solid"
        id="global-select-tooltip"
        event="mouseover focus"
        eventOff="mouseout blur"
      />
      <Select
        options={updatedOptions}
        getOptionProps={({ data }) => ({
          'data-tip': data.tooltipContent,
          'data-for': 'global-select-tooltip'
        })}
        {/* 保留你原有Select的其他配置项 */}
      />
    </>
  )
}

方案二：自定义Option组件（可控性更高） #

如果需要更复杂的自定义逻辑，可以自定义Option组件：

const CustomOption = (props) => {
  const { innerProps, data } = props;
  return (
    <div
      {...innerProps}
      data-tip={data.tooltipContent}
      data-for="global-select-tooltip"
    >
      {data.label}
    </div>
  )
}

// Select组件中使用
<Select
  options={updatedOptions}
  components={{ Option: CustomOption }}
  {/* 其他原有配置 */}
/>

以上两种方案都可以让tooltip同时支持鼠标悬停、键盘导航聚焦两种触发方式，不需要再额外处理焦点传递逻辑。

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