[Autocomplete] Prevent shrink animation in uncontrolled Autocomplete when default value is set

[ZeeshanTamboli]

Closes #44506

Also related to #36548 (see comment 1 and comment 2).

Problem

The shrink animation on input label is triggered when the HTML input value in the notched outlined input component changes from empty to filled.

In the Autocomplete component, the HTML input value is determined by the inputValue prop. Initially, inputValue is empty (source) when defaultValue prop is provided. The input value is later updated via state (source), causing a re-render and the shrink animation.

Fix

Compute the initial inputValue on the first render when defaultValue is provided. This ensures the input is correctly initialized, preventing the shrink animation on InputLabel.

Alternative that can be considered

Tell developer to use a controlled Autocomplete by managing inputValue and onInputValueChange. This avoids reliance on the default state mechanism. CodeSandbox: https://codesandbox.io/p/sandbox/stoic-fire-zz67mz-forked-8k9lmg

But since we already set the HTML input value using defaultValue, it makes sense to initialize inputValue accordingly during the first render to avoid the animation. And it already works for other components like TextField and Select.

Not sure how to add a test case for this.

Demos

• Before: https://codesandbox.io/p/sandbox/stoic-fire-zz67mz-forked-9d4cc8
• After: https://codesandbox.io/p/sandbox/material-ui-cra-ts-forked-5wpw6d

[mui-bot]

Netlify deploy preview

https://deploy-preview-44873--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against fe990dd