diff --git a/src/components/form/field_number/field_number.spec.tsx b/src/components/form/field_number/field_number.spec.tsx index d2b84d74d8f7..30ab1b40dd55 100644 --- a/src/components/form/field_number/field_number.spec.tsx +++ b/src/components/form/field_number/field_number.spec.tsx @@ -53,14 +53,6 @@ describe('EuiFieldNumber', () => { checkIsInvalid(); }); - it('shows invalid state on blur', () => { - cy.mount(); - checkIsValid(); - cy.get('input').click(); - cy.get('body').click('bottomRight'); - checkIsInvalid(); - }); - it('does not show invalid state on decimal values by default', () => { cy.mount(); checkIsValid(); @@ -103,5 +95,82 @@ describe('EuiFieldNumber', () => { cy.get('input').clear().type('2'); checkIsValid(); }); + + describe('checks/updates invalid state when props that would affect validity change', () => { + it('min', () => { + const UpdatedEuiFieldNumber = () => { + const [min, setMin] = useState(); + return ( + <> + + + + + ); + }; + cy.mount(); + cy.get('input').type('1'); + checkIsValid(); + + cy.get('#setInvalidMin').click(); + checkIsInvalid(); + cy.get('#setValidMin').click(); + checkIsValid(); + }); + + it('max', () => { + const UpdatedEuiFieldNumber = () => { + const [max, setMax] = useState(); + return ( + <> + + + + + ); + }; + cy.mount(); + cy.get('input').type('1'); + checkIsValid(); + + cy.get('#setInvalidMax').click(); + checkIsInvalid(); + cy.get('#setValidMax').click(); + checkIsValid(); + }); + + it('step', () => { + const UpdatedEuiFieldNumber = () => { + const [step, setStep] = useState(); + return ( + <> + + + + + ); + }; + cy.mount(); + cy.get('input').type('1'); + checkIsValid(); + + cy.get('#setInvalidStep').click(); + checkIsInvalid(); + cy.get('#setValidStep').click(); + checkIsValid(); + }); + }); }); }); diff --git a/src/components/form/field_number/field_number.tsx b/src/components/form/field_number/field_number.tsx index 7cc7a1351fd8..f7a6f9e003f7 100644 --- a/src/components/form/field_number/field_number.tsx +++ b/src/components/form/field_number/field_number.tsx @@ -107,7 +107,6 @@ export const EuiFieldNumber: FunctionComponent = ( readOnly, controlOnly, onKeyUp, - onBlur, ...rest } = props; @@ -128,13 +127,12 @@ export const EuiFieldNumber: FunctionComponent = ( setIsNativelyInvalid(isInvalid); }, []); - // Ensure controlled `value/onChange` fields are checked for native validity + // Re-check validity whenever props that might affect validity are updated useEffect(() => { - const isControlledValue = value != null; - if (isControlledValue && _inputRef.current) { + if (_inputRef.current) { checkNativeValidity(_inputRef.current); } - }, [value, checkNativeValidity]); + }, [value, min, max, step, checkNativeValidity]); const numIconsClass = controlOnly ? false @@ -172,11 +170,6 @@ export const EuiFieldNumber: FunctionComponent = ( onKeyUp?.(e); checkNativeValidity(e.currentTarget); }} - onBlur={(e) => { - // Browsers can also set/determine validity (e.g. when `step` is undefined) on focus blur - onBlur?.(e); - checkNativeValidity(e.currentTarget); - }} {...rest} />