我有一个包含选择字段的 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>
)
}
}