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'); + }); + }); });