onClick 事件未在 Firefox 中触发

Question

我有一个包含选择字段的 Web 组件。单击选择字段时，它会打开一个自定义下拉列表，其中包含您可以从中选择一个元素的元素。 出于某种原因，当我在 Firefox 中单击该元素时，我需要单击它两次，因为第一次单击不会触发该事件（Chrome 中的一切都按预期工作）。 任何想法如何解决这个问题？

代码如下：

  const renderSelect = (field: FormField) => {
    if((!field.updateable && editMode) || field.disabled) {
      return (
        <div class="prefilled-text">
          {field.value}
        </div>
      )
    } else {
      return (
        <div class="dropdown">
          <select
            id="dropdownclick"
            name={field.key}
            onClick={() => {
              field.open = true;
              forceUpdate(ref);
            }}
            class={{
              placeholder: field.value === '',
              selected: !!field.value,
              hidden: field.hidden,
            }}
          >
            {/* placeholder */}
            <option value="" selected disabled hidden>
              {field.value || field.placeholder}
            </option>
          </select>
          {/* option */}
          {
            field.open ?
            <div class="search-dropdown">
              <ul>
                {field.options.map((option) => (
                  <li onClick={() => {

                    selectDropdownOption(option, field);
                    field.open = false;
                    forceUpdate(ref);

                  }}>{option}</li>
                ))}
              </ul>
            </div>
            : null
          }
        </div>

      )
    }
  }