语义 UI React 选择下拉列表未关闭

Question

几天以来，我们使用 React 16.14 和 Semantic UI React (v.2.0.3) 的 Web 应用程序显示出奇怪的行为：当我从打开的下拉列表中选择一个选项时，该选项被选中，但下拉列表保持打开状态。

这只发生在装有 Google Chrome v.127.0.6533.120（64 位）的 Windows 11 计算机上。在 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)}

是否有人对 React / Semantic UI 组件有类似的问题，或者知道 Google Chrome 最近对 DOM 树中的类更新进行的更改？

Answer 1

我们也看到了同样的问题。一旦我们更新到最新的 chrome 版本，它就得到了纠正。版本128.0.6613.85