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次即可打开并从此自定义下拉列表中选择一个选项。

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

1 个答案: