[material-ui][TextField] Fix filled state to be synced with autofill (#44135)

Author: DiegoAndai

packages/mui-material/src/FormControl/FormControl.js

@@ -193,6 +193,14 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
     };
   }
 
+  const onFilled = React.useCallback(() => {
+    setFilled(true);
+  }, []);
+
+  const onEmpty = React.useCallback(() => {
+    setFilled(false);
+  }, []);
+
   const childContext = React.useMemo(() => {
     return {
       adornedStart,
@@ -208,15 +216,11 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
       onBlur: () => {
         setFocused(false);
       },
-      onEmpty: () => {
-        setFilled(false);
-      },
-      onFilled: () => {
-        setFilled(true);
-      },
       onFocus: () => {
         setFocused(true);
       },
+      onEmpty,
+      onFilled,
       registerEffect,
       required,
       variant,
@@ -231,6 +235,8 @@ const FormControl = React.forwardRef(function FormControl(inProps, ref) {
     fullWidth,
     hiddenLabel,
     registerEffect,
+    onEmpty,
+    onFilled,
     required,
     size,
     variant,

packages/mui-material/src/TextField/TextField.test.js

@@ -303,4 +303,28 @@ describe('<TextField />', () => {
       expect(getByRole('textbox')).to.have.attribute('data-testid', 'input-element');
     });
   });
+
+  describe('autofill', () => {
+    it('should be filled after auto fill event', () => {
+      function AutoFillComponentTest() {
+        const [value, setValue] = React.useState('');
+        return (
+          <TextField
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+            label="test"
+            variant="standard"
+            slotProps={{
+              htmlInput: { 'data-testid': 'htmlInput' },
+              inputLabel: { 'data-testid': 'label' },
+            }}
+          />
+        );
+      }
+
+      const { getByTestId } = render(<AutoFillComponentTest />);
+      fireEvent.animationStart(getByTestId('htmlInput'), { animationName: 'mui-auto-fill' });
+      expect(getByTestId('label').getAttribute('data-shrink')).to.equal('true');
+    });
+  });
 });