自定義選擇下拉菜單需要在Safari中點擊2次

我遇到了在React中製作的自定義組合框/數據列表問題，以及它在Safari中的行爲。在鉻中，它的行爲如何。用戶在文本輸入上點擊一次以顯示下拉菜單，再從下拉菜單中選擇該選項以選擇該選項。

問題是，在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之外。

來源

2017-07-17 Linden

我找到了解決方案。可能不是最有效的解決方案。

我在下拉菜單中添加了一個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點擊行爲。

現在，無論您是否滾動，只需點擊兩次即可打開並從此自定義下拉列表中選擇一個選項。

來源

2017-07-19 07:37:17 Linden

自定義選擇下拉菜單需要在Safari中點擊2次

回答

相關問題