search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.44k stars 31.84k forks source link

Autocomplete: end adornment placement of TextField #42680

Open stevepennings opened 2 weeks ago

stevepennings commented 2 weeks ago

Steps to reproduce

Here's a sandbox of my 'bare-minimum implementation'.

Current behavior

Would it be possible to get the end adornment investigated with the 'standard' and 'filled' variant in mind? The spacing of the InputBase in the TextField is very different when wrapped in the Autocomplete.

If I miss something in my implementation, I'd be very grateful for support.

Expected behavior

The EndAdornment of the TextField having the same vertical placing as the EndAdornment of the Autocomplete.

Context

I've got a custom TextField component extending the TextField component of MUI. I'm trying to make the custom Textfield compatible with the Autocomplete of MUI. The 'filled' and 'standard' are surprisingly not behaving the same as 'outlined'.

Your environment

-

Search keywords: component:autocomplete

steve-pennings commented 2 weeks ago

Additionally I'd like to mention that the end adornment of the AutoComplete creates more padding once a value has been selected. When hovered the clear button shows itself <> hidden with the same padding. Consequently, the end adornment also ends up having odd spacing from the right when it's not hovered. Somehow I can't believe I'm the only one facing this issue, but I truly could not find similar issues. Apologies if there are...

steve-pennings commented 2 weeks ago

Just found this issue that may have something to do with this one: https://github.com/mui/material-ui/issues/28465#issuecomment-1278773152