Add icon to the start of Material-UI's Autocomplete component

user_5355740 0
Viewed 741

I want to add an icon to the beginning of the Autocomplete component. (with startAdornment) I read that Autocomplete is a normal text input

So far I tried adding

InputProps={{startAdornment: <InputAdornment position="start">kg</InputAdornment>,}}

to the <TextField /> component. Like below:

<Autocomplete
            {...defaultProps}
            onChange={(event, value) => {
                handleOnChange(event, value);
            }}
            id="disable-close-on-select"
            sx={{ width: 300 }}
            renderInput={params => (
                <TextField
                    InputProps={{
                        startAdornment: <InputAdornment position="start">kg</InputAdornment>,
                    }}
                    {...params}
                    label="search"
                    variant="standard"
                />
            )}
        />

Any help would be great, as I'm a beginner to the Material-UI ecosystem.

defaultProps is defined like this.

const defaultProps = {
    options: data,
    getOptionLabel: (option: DataType) => option?.id,
};
react-props material-ui typescript reactjs autocomplete
1 Answers

The prop order matters. Your InputProps you define is overridden by the params.InputProps from renderInput. This:

<TextField InputProps={yourProps} {...params}

is the same as:

<TextField InputProps={yourProps} InputProps={param.InputProps} {...}

And the final result is:

<TextField InputProps={param.InputProps} {...}

You need to define your custom InputProps after you spread the params and make sure to spread in the nested prop too:

renderInput={(params) => {
  return (
    <TextField
      {...params}
      InputProps={{
        ...params.InputProps,
        startAdornment: (
          <InputAdornment position="start">kg</InputAdornment>
        )
      }}
      label="Movie"
    />
  );

Codesandbox Demo

user_94494260
Related