I am using an autocomplete component for my search. It works well for desktop but on mobile, the keyboard remains open once an option has been selected even though it redirects to another page.
<Autocomplete
id="free-solo-demo"
value={""}
className={classes.auto}
onChange={(event, value) => searchFunc(value)}
options={items.map((item) => item.item)}
renderInput={(params) => (
<TextField
label="Search..."
{...params}
InputProps={{
...params.InputProps,
disableUnderline: true,
classes: { input: classes.input },
}}
value={search}
/>
)}
/>
Search function:
const searchFunc = (value) => {
if (value) {
const param = items.filter((item) => item.item === value)[0].id;
setSearch("");
history.push(`/details/${param}`);
}
};
I want the mobile keyboard to close once an item has been selected!! Thank you :)