javascript - onClick 事件未在 Firefox 中触发
问题描述
我有这个 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>
)
}
}
解决方案
推荐阅读
- java - 不知道如何使用 LocalDate
- kotlin - 这种类型的函数怎么叫Listener?
- loops - 循环 2 个选择选项并显示 API 最佳匹配
- amazon-web-services - 如何从 AWS SES 中删除经过验证的域?
- macos - 为什么 macOS 上的动态库有 id?
- video - 当嵌入的视频处于自动播放状态时,youtube 是否会计算观看次数?
- javascript - Width attribute not acting properly on my webpage
- python - 如何基于组加入 Pyspark 数据帧
- javascript - d3.js 多线图上的点(符号)颜色
- webview - 您无法从此屏幕登录,因为此应用不符合 Google 的嵌入式网页浏览政策