[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 4c51335

[DiegoAndai]

@ZeeshanTamboli this solution makes sense 👍🏼

About the test, have you tried adding a regression test? Animations should be disabled on those, so with the bug the label would be on top of the input.

[ZeeshanTamboli]

About the test, have you tried adding a regression test? Animations should be disabled on those, so with the bug the label would be on top of the input.

@DiegoAndai Yes, I tried adding a regression test in the master branch to reproduce the bug. Here's what I did:

In test/regressions/index.test.js, I added this test:

it('should not perform shrink animation when default value is provided', async () => {
  const testcase = await renderFixture(
    '/regression-Autocomplete/ShrinkAnimationDefaultValue',
  );
  await takeScreenshot({
    testcase,
    route: '/regression-Autocomplete/ShrinkAnimationDefaultValue2',
  });
});

The ShrinkAnimationDefaultValue component:

import * as React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

const options = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
];

export default function Demo() {
  return (
    <Autocomplete
      options={options}
      getOptionLabel={(option) => option.title}
      defaultValue={options[1]}
      renderInput={(params) => <TextField {...params} label="limitTags" />}
      sx={{ width: '500px', m: 4 }}
    />
  );
}

However, the shrink animation still doesn't trigger for the screenshot. Here's a video of the issue on the master branch:

Screen-Recording.2.mp4

[ZeeshanTamboli]

@DiegoAndai This is ready for further review. Just pinging you as a reminder.

[DiegoAndai]

However, the shrink animation still doesn't trigger for the screenshot

@ZeeshanTamboli, I don't understand. Isn't that what we want to fix? The shrink animation not to trigger?

Or is it that it doesn't trigger without the fix?

[ZeeshanTamboli]

Or is it that it doesn't trigger without the fix?

@DiegoAndai Yes, the animation doesn't trigger without the fix. I tried this by running the test on the master branch, which doesn't include the fix. Can you try?

[DiegoAndai]

Can you try?

@ZeeshanTamboli you're right, I was wrong about how the animation would work.

I found a way to test this by spying on onInputChange. Before the fix, this is triggered with the 'reset' reason from here. With the fix, it's not called as it returns here.

Let me know if this makes sense.

[ZeeshanTamboli]

I found a way to test this by spying on onInputChange. Before the fix, this is triggered with the 'reset' reason from here. With the fix, it's not called as it returns here.

Let me know if this makes sense.

@DiegoAndai Good idea. It makes sense. 👍