Material UI Autocomplete - How do I add the same icon + text to the Textfield after I have selected

user_13933287 0
Viewed 848

So I'm currently trying to use Material UIs Autocomplete component but I am unable to have the selected item from the dropdown appear in the Textfield with the same icon.

This image is what I want (The dropdown icon + text is in the textfield) This is the image that I want

This is what I currently have: (As you can see, I am unable to render the icon aswell) enter image description here

How can I adjust my Autocomplete component to do this? This is my Autocomplete component:

<Autocomplete
    options={components}
    getOptionLabel={(option) => option.description}
    renderTags={options => 
    {
      return (
          options.map(option =>
            <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }}>
              <img src={option.logo} style={{ height: "20px", width: "20px", marginRight: "10px" }}/>
            {option.description}
          </Box>))
    }}
    renderOption={(props, option) => (
      <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
        <img src={option.logo} style={{ height: "20px", width: "20px", marginRight: "10px" }}/>
        {option.description}
      </Box>
    )}
    renderInput={(params) => (
        <TextField 
            {...params}
            variant="outlined" 
            label="Select component" 
         />
    )}
/>

How do I also make it search by just the text and not have the icon interfere?

NOTE: I was able to do it with the MUI Select component, but that component is not searchable, in which I need it to be.. hence trying to use Autocomplete..

Thanks for any help!!

material-ui reactjs
1 Answers

If the state responsible for the selected value of this Autocomplete component contains the whole selected object, you could achieve the icon at the start of the input by setting startAdornment prop of the TextField component:

const [option, setOption] = useState<OptionType | null>(null)

    <Autocomplete
      value={option}
      renderInput={(params) =>  <TextField {...params} 
        InputProps={{...params.InputProps, 
        startAdornment: <img src={option.logo} style={{ height: "20px", width: "20px", marginRight: "10px" }}/>}} 
      />}
    />
user_141906900
Related