diff --git a/src/Form/FormControl.jsx b/src/Form/FormControl.jsx index 54fc69fca7..ce87c498d6 100644 --- a/src/Form/FormControl.jsx +++ b/src/Form/FormControl.jsx @@ -19,6 +19,7 @@ const FormControl = React.forwardRef(({ autoResize, onChange, inputMask, + isAutoFill, ...props }, ref) => { const { @@ -79,7 +80,7 @@ const FormControl = React.forwardRef(({ isInvalid={isInvalid} isValid={isValid} className={classNames(controlClassName, { - 'has-value': hasValue, + 'has-value': hasValue || isAutoFill, })} onChange={handleOnChange} mask={inputMask} @@ -127,6 +128,8 @@ FormControl.propTypes = { autoResize: PropTypes.bool, /** Specifies what format to use for the input mask. */ inputMask: PropTypes.string, + /** Indicates whether the field contains an autofill value. */ + isAutoFill: PropTypes.bool, }; FormControl.defaultProps = { @@ -146,6 +149,7 @@ FormControl.defaultProps = { isInvalid: undefined, autoResize: false, inputMask: undefined, + isAutoFill: false, }; export default FormControl; diff --git a/src/Form/tests/FormControl.test.jsx b/src/Form/tests/FormControl.test.jsx index 1e01ab8371..66eb862527 100644 --- a/src/Form/tests/FormControl.test.jsx +++ b/src/Form/tests/FormControl.test.jsx @@ -71,4 +71,12 @@ describe('FormControl', () => { expect(input.value).toBe('+1 (555) 555-5555'); expect(unmaskedInputValue).toBe('15555555555'); }); + + it('applies has-value class when isAutoFill is true', async () => { + const { container } = render(); + + const inputElement = container.querySelector('input'); + + expect(inputElement).toHaveClass('has-value'); + }); });