Open frankruegamer opened 4 years ago
Interesting, that's another similar issue to #21409 and #22544.
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).
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' }
}}
/>}
/>
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.
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:
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 🌎