Material UI Autocomplete with Avatar in textfield

Question

Can I achieve avatar in the textfield of autocomplete material-ui component as the getOptionLabel prop only accepts a string and render option the expected UI is shown.ie profile picture and Name, can we get the same thing ie profile picture and name in the renderInput textField

Answer 1

You can return your custom component in renderInput props, and that custom can be a combination of icon and TextField Like this...

renderInput={(params, data) => (
  <div style={{ position: "relative" }}>
    {params.inputProps.value && (
      <span
        style={{
          position: "absolute",
          transform: "translateY(50%)",
          marginLeft: "5px"
        }}
      >
        {/* Write logic to have Icon from params.inputProps.value */}
        {countryToFlag("AD")}
      </span>
    )}
    <TextField
      {...params}
      label="Choose a country"
      variant="outlined"
      inputProps={{
        ...params.inputProps,
        autoComplete: "new-password",
        style: { paddingLeft: "20px" } // disable autocomplete and autofill
      }}
    />
  </div>
)}

As you can see I have provided the Absolute position span which will render the icon based on the selected value(I am still not able to find a way to access the options object).

Here is the complete and running sandbox project