diff --git a/packages/mui-material/src/FormControl/FormControl.js b/packages/mui-material/src/FormControl/FormControl.js
index dab1856439aa8a..f05e75e14872ce 100644
--- a/packages/mui-material/src/FormControl/FormControl.js
+++ b/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,
diff --git a/packages/mui-material/src/TextField/TextField.test.js b/packages/mui-material/src/TextField/TextField.test.js
index e1392563a0d5d7..adc29954d2ce2b 100644
--- a/packages/mui-material/src/TextField/TextField.test.js
+++ b/packages/mui-material/src/TextField/TextField.test.js
@@ -303,4 +303,28 @@ describe('', () => {
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 (
+ setValue(event.target.value)}
+ label="test"
+ variant="standard"
+ slotProps={{
+ htmlInput: { 'data-testid': 'htmlInput' },
+ inputLabel: { 'data-testid': 'label' },
+ }}
+ />
+ );
+ }
+
+ const { getByTestId } = render();
+ fireEvent.animationStart(getByTestId('htmlInput'), { animationName: 'mui-auto-fill' });
+ expect(getByTestId('label').getAttribute('data-shrink')).to.equal('true');
+ });
+ });
});