1

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 :)

Tom Adam
  • 21
  • 2
  • Please at least provide a working demo of your code on code sandbox or codepen or some similar site. – Vibhor Dec 24 '20 at 18:07
  • Find existing answers about how to close the keyboard. Example: https://stackoverflow.com/questions/8335834/how-can-i-hide-the-android-keyboard-using-javascript – Javier Rey Dec 24 '20 at 18:13

0 Answers0