如何在chakra-react-select中根据Select焦点状态动态设置multiValue样式？

问题描述 #

使用chakra-react-select@3.3.8版本，需要在Select元素通过Tab键等方式获得焦点时，动态修改multiValue（已选标签）的样式，但无法在multiValue的样式函数内直接获取Select的焦点状态。之前尝试通过state.selectProps.menuIsOpen判断，但这不符合需求（菜单未展开时Select也可能处于焦点状态）。

现有样式代码框架：

multiValue: (provided, state) => {
  const styles = isSelectFocused ? multiValueFocusedStyle : multiValueDefaultStyle;

  return {
    ...provided,
    ...styles,
  };
},

解决方案 #

可以通过维护组件内的焦点状态，结合Select的onFocus和onBlur事件来实现，具体操作如下：

• 在组件内定义状态变量跟踪Select的焦点状态：

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

const YourComponent = () => {
  const [isSelectFocused, setIsSelectFocused] = useState(false);
  
  // ...其他业务逻辑
};

• 给Select绑定onFocus和onBlur事件，更新焦点状态：

<Select
  // 你的其他配置props
  onFocus={() => setIsSelectFocused(true)}
  onBlur={() => setIsSelectFocused(false)}
  styles={{
    multiValue: (provided, state) => {
      const targetStyle = isSelectFocused ? multiValueFocusedStyle : multiValueDefaultStyle;
      return {
        ...provided,
        ...targetStyle,
      };
    },
    // 其他需要配置的样式
  }}
/>

• （可选）处理焦点丢失的边界情况
  如果存在点击菜单选项后焦点转移的场景，可以结合menuClose事件补充校验：

<Select
  // ...其他props
  onMenuClose={() => {
    // 菜单关闭后检查当前焦点是否仍在Select上
    const selectElement = document.activeElement;
    // 这里需要给你的Select设置data-testid或者通过其他方式匹配元素
    if (selectElement?.getAttribute('data-testid') === 'custom-select') {
      setIsSelectFocused(true);
    } else {
      setIsSelectFocused(false);
    }
  }}
/>

原理说明 #

chakra-react-select的样式函数仅能通过state参数获取当前子元素（如multiValue自身）的状态，无法直接拿到根Select组件的焦点状态。通过手动绑定焦点事件维护状态变量，就能在样式函数中直接使用该状态值来动态切换multiValue的样式。

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