React-select：如何仅在键盘导航时显示外边框？

方案1：使用CSS :has选择器（推荐，简洁） #

利用:focus-visible仅在键盘导航触发焦点时作用于内部input的特性，结合:has选择器让外层control在满足条件时显示边框。这种方法纯CSS实现，无需额外JS逻辑：

const customStyle = {
  control: (provided, state) => ({
    ...provided,
    height: '4.8rem',
    border: '0.1rem solid gray',
    fontSize: '1.4rem',
    outline: 'unset',
    // 当内部input通过键盘获得焦点时，给control添加焦点边框
    '&:has(input:focus-visible)': {
      outline: '5px auto -webkit-focus-ring-color',
    },
  }),
};

说明：:has选择器支持现代主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+），如果你的项目需要兼容旧版浏览器，可考虑方案2。

方案2：通过JS状态区分焦点触发方式 #

通过监听鼠标和焦点事件，标记焦点是否由键盘触发，再动态控制control的边框样式：

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

const CustomSelect = () => {
  const [isKeyboardFocused, setIsKeyboardFocused] = useState(false);
  let isMouseTriggered = false;

  const handleMouseDown = () => {
    isMouseTriggered = true;
  };

  const handleFocus = () => {
    // 只有非鼠标触发的焦点才标记为键盘焦点
    setIsKeyboardFocused(!isMouseTriggered);
    // 重置标记，避免影响后续焦点事件
    setTimeout(() => (isMouseTriggered = false), 0);
  };

  const handleBlur = () => {
    setIsKeyboardFocused(false);
  };

  const customStyle = {
    control: (provided, state) => ({
      ...provided,
      height: '4.8rem',
      border: '0.1rem solid gray',
      fontSize: '1.4rem',
      outline: 'unset',
      // 仅当组件聚焦且是键盘触发时显示边框
      ...(state.isFocused && isKeyboardFocused && {
        outline: '5px auto -webkit-focus-ring-color',
      }),
    }),
  };

  return (
    <Select
      styles={customStyle}
      onMouseDown={handleMouseDown}
      onFocus={handleFocus}
      onBlur={handleBlur}
      // 其他props...
    />
  );
};

说明：这种方法兼容性更好，通过isMouseTriggered标记区分鼠标点击行为，在焦点事件中判断是否为键盘触发，动态更新状态来控制样式。

为什么之前的方法不生效？ #

• :focus-visible直接用在control上无效：因为实际获焦的是组件内部的隐藏input，而非外层control div。
• 给control加tabindex=0会冲突：这会让control和内部input都成为可获焦元素，干扰React-select原生的键盘导航逻辑。
• :focus-within无法区分触发方式：只要内部元素获焦（无论鼠标还是键盘），都会触发样式，不符合需求。

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