[material-ui][Autocomplete] Resizing on hover/focus when displayed in a table with table-layout: auto set

[Martin-Cox]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/icy-voice-mh8ff2?file=%2Fsrc%2FDemo.tsx

Steps:

1. Open link
2. Hover over the Movie autocomplete field

Current behavior

When hovering over the autocomplete field (or when focusing in on it) the autocomplete shrinks. If you position the mouse in the "right" position, the autocomplete will rapidly switch between the full size version and the shrunken version.

Expected behavior

The autocomplete field should not resize when hovering over it.

Context

My website allows users to enter data into "editable" tables, where the cells contain MUI fields that the user can enter data into:

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.11.0 - ~\AppData\Local\Volta\tools\image\node\20.11.0\node.EXE
    npm: 10.3.0 - ~\AppData\Local\Volta\tools\image\npm\10.3.0\bin\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (125.0.2535.51)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.4
    @emotion/styled: ^11.11.0 => 11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.16
    @mui/lab: ^5.0.0-alpha.159 => 5.0.0-alpha.170
    @mui/material: ^5.15.3 => 5.15.16
    @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-date-pickers: ^7.0.0-alpha.9 => 7.3.2
    @types/react: 18.3.1 => 18.3.1
    react: ^18.2.0 => 18.3.1
    react-dom: ^18.2.0 => 18.3.1
    typescript: ^5.3.3 => 5.4.5

I'm using Chrome Version 125.0.6422.60 (Official Build) (64-bit), but this also happens in Firefox 126.0 (64-bit),
My site is using @mui/material 5.15.3, but as demonstrated in the CodeSandbox recreation it is also happening in the latest version of MUI.

I think this is a result of this commit https://github.com/mui/material-ui/pull/41781/files. If I disable the following style on the element it stops resizing:

Search keywords: autocomplete

[DalSoft]

Until there is a fix you can workaround with this:

sx={{ "& :hover .MuiAutocomplete-input": { minWidth: "30px" } }}

[Martin-Cox]

sx={{ "& :hover .MuiAutocomplete-input": { minWidth: "30px" } }}

True, that works for hovering over the input box in this specific scenario, however if you hover over the dropdown element or if you select an item then the Autocomplete will start resizing again.

[DalSoft]

Yeah that's annoying I think workaround is going to be awkward because of specificity. I'm also looking for a fix or workaround to this issue. This bug means you can't use autocomplete in flexbox without setting a width.

[DalSoft]

Yeah that's annoying I think workaround is going to be awkward because of specificity. I'm also looking for a fix or workaround to this issue. This bug means you can't use autocomplete in flexbox without setting a width.

Actually looking at the code my workaround is just missing the focused selector.

sx={{ "& :hover .MuiAutocomplete-input, & .Mui-focused .MuiAutocomplete-input": { minWidth: "30px" } }}

[ZeeshanTamboli]

It's a regression from #41781. Created PR to fix it: #42452

[mimccio]

I'm still having the same issue

resizeonhover.mp4

Thanks for the workaround

[ZoranRavic]

@mimccio Which version are you on?