[Autocomplete] Icon as startAdornment shifts TextField upwards

[frankruegamer]

Using an Material Icon as start adornment in an Autocomplete will move the text field slightly higher. This does not happen for the end adornment. It also does not happen with text only instead of an icon.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The text field is shifted upwards.

Expected Behavior 🤔

The text field should not be shifted upwards.

Steps to Reproduce 🕹

https://codesandbox.io/s/dawn-pine-n2bfn?file=/src/index.js:0-328

I added several other examples where the text field is still on the correct height.

Steps:

1. Declare an Autocomplete
2. Define a material icon as startAdornment in the InputProps

Context 🔦

I'm trying to use Autocompletes with and without icon together but they will not look good next to each because of this issue.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
Material-UI Icons	v4.9.1
React	v16.13.1
Browser	Firefox + Chrome

[oliviertassinari]

Interesting, that's another similar issue to #21409 and #22544.

[AmoleR]

After a bit of research, this seems to be an issue on the padding provided.

In your demo (Material-UI 5), it seems that (as you mentioned) the issue is with trying the image on the startAdornment (everything else seems to be inline). Debugging a bit, it says that the issue is as follows: when you have <SearchIcon />, it renders it as a child of the div .MuiAutocomplete-inputRoot[class*="MuiInput-root"]. Thus, taking a look at the CSS, we see that .MuiAutocomplete-inputRoot[class*="MuiInput-root"] .MuiAutocomplete-input has padding 4px, while .MuiAutocomplete-inputRoot[class*="MuiInput-root"] .MuiAutocomplete-input:first-child has padding 6px 0px.

It's thus an issue with the order. I don't have a current fix, and I'll debug a bit more into this to see what I can dig up.

A small note is that CSS doesn't work exactly how you would think it does: if we have the class structure:

.MuiAutocomplete-inputRoot[class*="MuiInput-root"]
    .MuiSvgIcon-root
    .MuiAutocomplete-input

it doesn't consider anything as the first child (according to the above CSS).

[jesperborgstrup]

FWIW, I managed to work around it by manually setting the padding of the input:

<Autocomplete
  ...
  renderInput={(params) => <TextField {...params}
    inputProps={{
      ...params.inputProps,
      style: { padding: '6px 0' }
    }}
  />}
/>