React 16.14搭配Semantic UI React Select下拉框选中后不关闭问题

问题详情 #

基于React 16.14与Semantic UI React（v2.0.3）开发的Web应用出现异常：选择下拉框选项后，选项值已正常更新，但下拉面板仍保持展开状态。该问题**仅出现在Windows 11系统的Google Chrome v127.0.6533.120（64位）**浏览器中，Firefox与Edge浏览器表现正常。

相关代码 #

<Form.Field data-test="FilterFormFieldSelect">
  <Select
    value={data.fieldName}
    search
    onChange={handleOnChangeField}
    options={fields.map(item => ({
      value: item.name,
      text: item.label,
      content: item.content,
      icon: item.listIcon,
    }))}
  />
</Form.Field>

const handleOnChangeField = (e, target) => {
  const newField = getField(target.value);
  const sameFormType = newField.formType.name === formType.name;

  setData({
    fieldName: target.value,
    value: sameFormType ? data.value : newField.defaultValue,
    error: false,
  });
};

已尝试的无效方案 #

• 手动查找下拉框元素并移除“visible”类
• 两次调用handleOnChangeField强制重渲染
• 调用setData({...data})触发重渲染
• 改写事件处理器为onChange={(e, target) => handleOnChangeField(e, target)}

可行解决方案尝试 #

1. 直接调用Select组件的关闭方法 #

利用React ref获取Semantic UI Select的实例，在onChange回调中强制触发关闭逻辑：

// 定义ref
const selectRef = useRef(null);

// 绑定到Select组件
<Form.Field data-test="FilterFormFieldSelect">
  <Select
    ref={selectRef}
    value={data.fieldName}
    search
    onChange={handleOnChangeField}
    options={fields.map(item => ({
      value: item.name,
      text: item.label,
      content: item.content,
      icon: item.listIcon,
    }))}
  />
</Form.Field>

// 修改回调函数
const handleOnChangeField = (e, target) => {
  const newField = getField(target.value);
  const sameFormType = newField.formType.name === formType.name;

  setData({
    fieldName: target.value,
    value: sameFormType ? data.value : newField.defaultValue,
    error: false,
  });
  // 强制关闭下拉面板
  selectRef.current?.close();
};

2. 阻止事件冒泡（适配Chrome 127事件逻辑变动） #

Chrome 127对DOM事件的冒泡/捕获机制有细微调整，可能干扰了Semantic UI内部的关闭触发逻辑，在回调中添加阻止冒泡：

const handleOnChangeField = (e, target) => {
  e.stopPropagation();
  const newField = getField(target.value);
  const sameFormType = newField.formType.name === formType.name;

  setData({
    fieldName: target.value,
    value: sameFormType ? data.value : newField.defaultValue,
    error: false,
  });
};

3. 版本兼容性调整 #

• 临时降级Chrome到v126版本，验证是否为Chrome新版本的兼容性问题
• 升级Semantic UI React到最新稳定版（如v2.1.5），官方可能已修复Chrome 127的兼容bug

4. 替换Search属性的实现 #

带search属性的Select组件在Chrome 127可能存在渲染时序问题，可临时移除search属性测试；若问题消失，可自行实现搜索逻辑或使用Semantic UI的SearchSelect替代组件。

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