search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.59k stars 32.2k forks source link

[material-ui][Autocomplete] Non-fixed width Autocomplete resizes on hover #42507

Closed nico-martinucci closed 4 months ago

nico-martinucci commented 4 months ago

Steps to reproduce

From my testing, it looks like this bug was introduced in v5.15.18, possible from #42176.

Link to live example, v.5.15.18 (bug is present): CodeSandbox Link to live example, v5.15.17 (no bug): CodeSandbox

Current behavior

On hover, an Autocomplete without a fixed width shrinks in size

Expected behavior

Should behave as before - no resize on hover

Context

Most of the autocompletes we use are of fixed width, but there are a few places where we use multiple autocompletes in a horizontal row and flexGrow to allow them to fill the available space. Fixed widths are not possible in this application. The examples above are very bare-bones examples of how we use them in this context.

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.0 Binaries: Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm pnpm: 8.14.3 - ~/Library/pnpm/pnpm Browsers: Chrome: 125.0.6422.114 Edge: Not Found Safari: 17.0 npmPackages: @emotion/react: 11.11.4 => 11.11.4 @emotion/styled: 11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.18 @mui/icons-material: 5.15.18 => 5.15.18 @mui/material: 5.15.18 => 5.15.18 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-charts: 7.5.1 => 7.5.1 @mui/x-data-grid: 7.5.1 @mui/x-data-grid-pro: 7.5.1 => 7.5.1 @mui/x-date-pickers: 7.5.1 => 7.5.1 @mui/x-date-pickers-pro: 7.5.1 => 7.5.1 @mui/x-license: 7.2.1 => 7.2.1 @types/react: 18.2.79 => 18.2.79 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 5.4.5 => 5.4.5 ```

Search keywords: autocomplete, hover

SrMatheus2000 commented 4 months ago

I'm also running into the same issue, also one thing i noticed is that the placeholder vanishes when hovering. Example Also would be nice if the field had at least the min size of the placeholder, like it does when it is a label, so it wont ellipsis

ZeeshanTamboli commented 4 months ago

Duplicate of #42340

It was fixed in #42452, which will be available in the next release.