I'm creating a search bar like so:
<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>
In Safari, and Safari only, I am not able to click in the input at all; I don't even see the cursor in there.
This is not the same as this question, because in this question the input can be selected and the cursor appears but they can't type. Even though it's not the same problem I did try the solution suggested in that question, which is to add the propertyy -webkit-user-select:textto the input, and it didn't work.
Question: why can't I focus in my input and how do I make it possible?
