[Autocomplete] Label is shrinked when providing an empty array as a value to Autocomplete when using multiple and renderValue

[mcibique]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-gzukpres?file=Demo.tsx
2. Check the state of the shrink animation on the input label. It's true instead of false.

Current behavior

An autocomplete with multiple set to true and value set to [] renders the input label with data-shrink="true" instead of false.

Expected behavior

The data-shrink should be false if the controlled value is [].

Context

Recent change in 7.0.2 (PR: #45734) prevents the shrink animation to run if an initial value for the autocomplete is given. The PR didn't account for multiple variant of the autocomplete when the user can pass [] - this should be considered as an empty value and the shrink animation should run.

For the controlled autocomplete with multiple set to false, everything works as expected and if the user sets the value to "", then the data-shrink is false very likely because "" is a falsy value. For multiple set to true, the [] is not a falsy value and probably breaks the behaviour.

Your environment

npx @mui/envinfo

 System:
    OS: Linux 6.8 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
  Binaries:
    Node: 18.20.8 - ~/.nvm/versions/node/v18.20.8/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v18.20.8/bin/npm
    pnpm: 10.9.0 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.0.2 
    @mui/icons-material: ^7.0.2 => 7.0.2 
    @mui/lab: ^7.0.0-beta.11 => 7.0.0-beta.11 
    @mui/material: ^7.0.2 => 7.0.2 
    @mui/private-theming:  7.0.2 
    @mui/styled-engine:  7.0.2 
    @mui/system:  7.0.2 
    @mui/types:  7.4.1 
    @mui/utils:  7.0.2 
    @mui/x-data-grid:  7.29.0 
    @mui/x-data-grid-pro: ^7.29.0 => 7.29.0 
    @mui/x-date-pickers:  7.29.0 
    @mui/x-date-pickers-pro: ^7.29.0 => 7.29.0 
    @mui/x-internals:  7.29.0 
    @mui/x-license: ^7.29.0 => 7.29.0 
    @types/react: ^19.1.2 => 19.1.2 
    react: ^19.1.0 => 19.1.0 
    react-dom: ^19.1.0 => 19.1.0 
    typescript: ^5.8.3 => 5.8.3

Tested on Brave (Chromium 135) and Firefox 137

Search keywords: shrink autocomplete multiple

[ZeeshanTamboli]

@mcibique When multiple is set, the input value is empty, so the label is not shrinked. In your case, the label shrinks because you're using the renderValue prop, and rendering an empty value. Comment out renderValue—you'll see the label doesn't shrink: https://stackblitz.com/edit/react-gzukpres-6yo9q9rw

Also when you provide a default value when multiple is enabled you'll notice the label does not perform shrink animation on page refresh: https://stackblitz.com/edit/react-gzukpres-1peetn13

However, if you use the deprecated renderTags prop instead of renderValue, you'll see that the label is not shrinked even if value is empty ([]): https://stackblitz.com/edit/react-gzukpres-rwdceznu. This issue is related to #45387, not #45734. The label should not be shrinked when an empty value is provided.

Marking this as a regression. I will try to create a PR soon.

[mcibique]

Thanks @ZeeshanTamboli, commenting out the renderValue or returning null from the function fixed the issue. Sorry I didn't realise it's been caused by the custom logic. Great explanation.

[ZeeshanTamboli]

Created a PR to fix it - #46047