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}
/>