Re-Position material autocomplete popup icon

user_2984653 0
Viewed 490

I am looking for a way to add a custom button to the end of material autocomplete. The problem is that it seems popup icon is styled to be at the end of the autocomplete input.

enter image description here

This style cause something like below which prevents from putting a button at the end of autocomplete.

enter image description here

But I want something like below.

enter image description here

The way I am adding this button is by overriding endAdornment of autocomplete textfield.

renderInput={(params) => (
  <TextField
    {...params}
    label={label}
    variant="outlined"
    InputProps={{
      ...params.InputProps,
      endAdornment: (
        <>
          <InputAdornment position="end">
            <IconButton icon="search" style={{ padding: '2px' }} />
          </InputAdornment>
          {params.InputProps.endAdornment}
        </>
      ),
    }}
  />
)}

Is there any way to do this?

react-material material-ui reactjs
1 Answers

When Autocomplete element inspected, you can see there is a huge padding-left applied to Autocomplete-inputRoot element that pushes away TextField element you're using as renderInput. Therefore, you need to override that padding. And to move the Autocomplete popupIcon you need to override the left css property

const Autocomplete = withStyles({
  inputRoot: {
    padding: "16px !important",

    '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-endAdornment': {
      left: 32, // probably the width of your search IconButton or more if needed
    },
  },
})(MuiAutocomplete);

Please note that you can play with this style to achieve your best result.

user_32123790
Related