[material-ui][Autocomplete] Initial render with a default value set always causes input label to perform the shrink animation

[ShotSkydiver]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/stoic-fire-zz67mz-zz67mz?from-embed=&workspaceId=edc4f89e-5831-4c48-b5ed-57fcd105b256
2. Click show/hide autocomplete button
3. Watch the input label do its shrink animation despite there being a value set initially

Current behavior

When providing a value to Autocomplete, on initial render it'll animate the input label shrinking as if a value was entered after the component was rendered, which gets extra visually annoying when having large groups of autocomplete fields that are contained within Steps or show/hide buttons

Expected behavior

The input label is already shrunk at initial render without any animation, like it is for TextField, Select, etc

Context

N/A

Your environment

npx @mui/envinfo

    System:
    OS: macOS 15.2
  Binaries:
    Node: 23.2.0 - /opt/homebrew/bin/node
    npm: 10.9.0 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Safari: 18.2
  npmPackages:
    @emotion/react: 11.13.3 => 11.13.3 
    @emotion/styled: 11.13.0 => 11.13.0 
    @mui/base: 5.0.0-beta.61 => 5.0.0-beta.61 
    @mui/codemod: 6.1.7 => 6.1.7 
    @mui/core-downloads-tracker:  6.1.4 
    @mui/icons-material: 6.1.7 => 6.1.7 
    @mui/lab: 6.0.0-beta.15 => 6.0.0-beta.15 
    @mui/material: 6.1.7 => 6.1.7 
    @mui/private-theming:  6.1.7 
    @mui/styled-engine:  6.1.4 
    @mui/styles: 6.1.7 => 6.1.7 
    @mui/system: 6.1.7 => 6.1.7 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.4 
    @mui/x-charts: 7.22.2 => 7.22.2 
    @mui/x-charts-vendor:  7.20.0 
    @mui/x-data-grid: 7.22.2 => 7.22.2 
    @mui/x-date-pickers: 7.22.2 => 7.22.2 
    @mui/x-internals:  7.21.0 
    @types/react:  18.3.11 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 

Search keywords: autocomplete shrink animation initial value

[DiegoAndai]

Hey @ShotSkydiver, thanks for the report. I can confirm this is a bug.

[yash49]

@ShotSkydiver you can use display: 'none'

export default function LimitTags() {
  const [showAutocomplete, setShowAutocomplete] = useState(false);
  return (
    <>
      <Button onClick={() => setShowAutocomplete(!showAutocomplete)}>
        Show/Hide Autocomplete
      </Button>

      <Autocomplete
        id="render-label"
        options={top100Films}
        getOptionLabel={(option) => option.title}
        value={top100Films[11]}
        renderInput={(params) => <TextField {...params} label="limitTags" />}
        sx={{
          width: "500px",
          m: 4,
          display: showAutocomplete ? undefined : "none",
        }}
      />
    </>
  );
}

[ShotSkydiver]

@yash49 that doesn't work for my use case, I'm building a multi-step form that renders each step separately, so it's that initial render when switching steps that makes the label shrink which is visually jarring

[ZeeshanTamboli]

@ShotSkydiver A similar issue existed in #36548 for inputValue. It works when you pass inputValue:

<Autocomplete
  id="render-label"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  inputValue={top100Films[11].title}
  renderInput={(params) => <TextField {...params} label="limitTags" />}
  sx={{ width: '500px', m: 4 }}
/>;

However, it should also work with value and defaultValue. I am trying to fix it in #44873

[ShotSkydiver]

@ZeeshanTamboli thanks for the further info! Seems like that doesn't work when using an object as the value prop though, it just displays the value as [object Object] and crashes when clicking into the field because it's trying to treat the inputValue like a string

[ZeeshanTamboli]

@ShotSkydiver Pass the title for the input value: inputValue={top100Films[11].title}.

However, you’ll need a controlled Autocomplete using value/onChange and inputValue/onInputChange props combinations. This is a workaround. See the example here: https://codesandbox.io/p/sandbox/stoic-fire-zz67mz-forked-8k9lmg.

[ZeeshanTamboli]

@ShotSkydiver I also noticed you are using value in your Autocomplete to show a default value. This doesn't work when you select option a second time. Only the selected value is shown in the options list.
To show a default value, you need to use defaultValue prop. So this bug is with the defaultValue prop, not value prop.