reactjsinputmaterial-uiiconsmui-autocomplete

How not to spin mui autocomplete popup icon?


how not to spin search icon after open autocomplete input?

<Autocomplete
  popupIcon={<Search />}
  onChange={(e, value) => handleFound(value)}
  options={['0', '2', '3', '1']}
  sx={{ width: '100%' }}
  renderInput={(params) =>
    <TextField {...params} placeholder={'type anything...'} />
  }
/>

Solution

  • You need to stop the rotation from the popup indicator styles, like this:

    <Autocomplete
      popupIcon={<Search />}
      onChange={(e, value) => handleFound(value)}
      options={["0", "2", "3", "1"]}
      sx={{
        width: "100%",
        "& .MuiAutocomplete-popupIndicator": { transform: "none" },
      }}
      renderInput={(params) => (
        <TextField {...params} placeholder={"type anything..."} />
      )}
    />
    

    Note that this is not the only solution but in my opinion is the fastest...