自定义ComboBox组件选中项图标错位问题排查求助

1. 图标定位错误的核心原因 #

你给选中项的伪元素::after用了position: absolute，但父元素.combobox-option没有设置position: relative。绝对定位的元素会相对于最近的**有定位属性（非static）**的父元素定位，如果找不到，就会相对于页面根元素定位。这就导致所有选中项的图标都会跑到同一个位置（通常是列表容器的右上角），看起来就像固定在第一项上。

2. 选中状态的判断逻辑错误 #

你用option.value === search来标记选中项，这是把「搜索词和选项值匹配」当成了选中条件，而不是用户实际点击选择的项。正确的做法应该用专门的状态变量（比如selectedValue）来存储用户选中的选项值，再用这个值来判断是否添加selected类。

修改后的代码 #

CSS 调整 #

给.combobox-option添加相对定位，同时优化图标的垂直居中：

.combobox-option {
  padding: 0.25em 0.5em;
  cursor: pointer;
  position: relative; /* 新增：为绝对定位提供上下文 */

  &.selected {
    background-color: red;
    color: var(--color-white);

    &::after {
      content: " ";
      cursor: pointer;
      display: block;
      position: absolute;
      top: 50%; /* 垂直居中 */
      right: 0.5em; /* 和右侧保持间距 */
      transform: translateY(-50%); /* 修正垂直居中 */
      width: 25px;
      height: 25px;
      background-image: url(../check.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
  &.highlighted {
    background-color: var(--color-bg-blue);
    color: var(--color-white);
  }
}

React 代码调整 #

改用专门的选中状态变量来判断选中项：

// 先在组件里定义存储选中值的状态
const [selectedValue, setSelectedValue] = useState('');

// 修正选项选中的逻辑
const optionSelected = (index) => {
  const selectedOption = options[index]; // options是你的选项数组
  setSelectedValue(selectedOption.value);
  // 其他原有逻辑...
};

// 渲染li时修改选中判断条件
<li
  tabIndex={0}
  className={clsx(
    "combobox-option",
    option.value === selectedValue && "selected", // 用选中状态变量判断
    index === highlightedIndex && "highlighted", 
  )}
  key={option.label}
  onClick={() => {
    optionSelected(index);
    setIsOpen(false);
  }}
>
  <span>{option.value}</span>
</li>

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