javascript - 自定义选择下拉菜单需要在 Safari 中点击 2 次

Question

早上好/下午好/随便。

我在使用 React 中创建的自定义组合框/数据列表以及它在 Safari 中的行为时遇到问题。在 Chrome 中，它的行为方式与预期一致。用户单击文本输入一次以显示下拉列表，然后再次单击下拉列表中的选项以选择该选项。

问题是在 Safari 中，需要再次单击。用户单击文本输入以显示下拉列表，然后第二次单击仅关注下拉列表，然后需要第三次单击才能从下拉列表中实际选择选项。

下面是我正在使用的内容的基本演示，但显然它并不是全部。

showDropdown() {
    if (this.props.options.length < 11) {
        this.dropdown.size = this.props.options.length;
    } else { this.dropdown.size = 11; }
}

hideDropdown() {
    this.dropdown.size = 0;
}

render() {
    const dropdown = (
        <select
            ref={c => { this.dropdown = c; }}
            id={`${this.props.id}_dropdown`}
            value={this.state.value}

            onFocus={this.showDropdown}
            onBlur={this.hideDropdown}
            tabIndex="-1"
        >
            {listToTimeField(this.props.options)}
        </select>
    );

    return (
        <div>
            <input
                ref={c => { this.input = c; }}
                name={`${this.props.name}_input`}
                value={this.state.input_value}

                onFocus={this.handleFocus}
                onChange={this.handleEdit}
                onBlur={this.handleBlur}
            />
            <div className="dropdown_container">
                {dropdown}
            </div>
        </div>
    );
}

此代码在大多数平台上运行良好，但 Safari 除外。

Answer 1

我已经找到解决办法了。但可能不是最有效的解决方案。

我向下拉列表添加了一个 onClick 处理程序，用于读取所单击的元素的值，并将该值分配给下拉列表。

dropdownClick(e) {
    if (this.dropdown.size > 0
    && this.dropdown.value !== e.target.value) {
        this.dropdown.value = e.target.value;
    }
    this.hideDropdown();
}

这几乎完全解决了问题，但是，如果您向下滚动下拉列表然后单击它，它将返回到 3 次单击行为。为了解决这个问题，我为 onScroll 添加了另一个处理程序。

onScroll={e => e.target.focus()}

这意味着下拉列表将聚焦于滚动，并消除了滚动时的 3 次点击行为。

现在，无论您是否滚动，只需单击 2 次即可打开此自定义下拉列表并选择一个选项。