[Autocomplete & TextField]: Autocomplete and Textfield have different heights when using variant='filled' and hiddenLabel

[paulleonartcalvo]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Place a textfield with variant='filled' and hiddenLabel and size='small
2. On the same horizontal axis, place an Autocomplete with size='small' and renderInput={(props) => <TextField {...props} hiddenLabel variant="filled" /> (the behavior occurs whether or not the props are added to TextField)

Sandbox

Current behavior 😯

Both the text field and the autocomplete are using the same Textfield variants and sizes, yet they render with different heights. This causes significant layout alignment issues when using textfields together with autocompletes. For example, entering a stroke color into the textField and then selecting a stroke width from the autocomplete side by side.

Expected behavior 🤔

With the TextFields having the same props, the expected behavior is that they render to the same height.

Context 🔦

I just want to render two flex columns inside a flex container with a gap such that each column has a title, then a gap beneath it, and then the autocomplete or the textfield. The flex layout works, but the autocomplete and textfield render to different heights, creating an offset layout in my application. I would expect both the textfield and autocomplete to render to the same height so that my UI is consistent. I tried modifying the height of the autocomplete to fill the container to no avail.

Your environment 🌎

npx @mui/envinfo

  Browser used: Chrome
  System:
    OS: macOS 12.5.1
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.14.0 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.103
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.6.1

[paulleonartcalvo]

Hi :)

Has there been any movement on this specific issue? Just trying to circle back to see if i should update my version or not. Thank you!

[michaldudak]

Hi @paulleonartcalvo, sorry for the late response. I've created a PR that fixes this issue, but I still have to verify if it doesn't break anything else.