html - 单击时 react safari 无法专注于输入

Question

我正在像这样创建一个搜索栏:

<form
  id="search-bar-form"
  onSubmit={e => {
    e.preventDefault();
  }}
>
  <div id="search-bar-div">
    <input
     onChange={async e => {
       console.log("I was changed");//debug
         // Set the search term
        setSearchTerm(e.target.value);
        // Fetch results
        await debouncedSearch(e.target.value);
      }}
      onKeyUp={onKeyUp}
      type="text"
      name="search"
      id="search-bar"
      aria-label="search"
      value={searchTerm}
      list="search-bar-autocomplete"
      autoComplete="off"
      placeholder={`🔍 ${t('searchbar.default-value')}`}
    />
    <div>
      <ul id="search-bar-autocomplete">
        {searchResults &&
          searchResults.length > 0 &&
          searchResults.map((result, index) => (
            <li
              key={index}
              style={
                selectionIndex === index
                  ? {
                      backgroundColor: '#e8e8e8',
                    }
                  : null
              }
              onClick={() => {
                const selectedItem = searchResults[index];
                setSearchTerm(selectedItem.name);
                handleItemSelected(selectedItem);
              }}
            >
              {result.name}
            </li>
          ))}
      </ul>
    </div>
  </div>
</form>

在 Safari 中，并且仅在 Safari 中，我根本无法点击输入；我什至没有在其中看到光标。

这与 this question 不同，因为在这个问题中可以选择输入并且出现光标但他们不能输入。尽管这不是同一个问题，但我确实尝试了该问题中建议的解决方案，即将属性 -webkit-user-select:text 添加到输入中，但它没有用。

问题:为什么我不能专注于我的输入，我该如何做到这一点？

Answer 1

我建议user-select: text;。 webkit 版本是一个 polyfill。