Add more fixes for invalid states not updating as expected

+ remove `onBlur` logic - the useEffect now handles that on mount, and blur behavior should no longer be necessary
elastic · Oct 17, 2023 · b08e43d · b08e43d
1 parent 503a914
commit b08e43d
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 18 deletions.
diff --git 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(<EuiFieldNumber max={1} value={2} />);
-      checkIsValid();
-      cy.get('input').click();
-      cy.get('body').click('bottomRight');
-      checkIsInvalid();
-    });
-
     it('does not show invalid state on decimal values by default', () => {
       cy.mount(<EuiFieldNumber />);
       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<number | undefined>();
+          return (
+            <>
+              <EuiFieldNumber min={min} />
+              <button id="setInvalidMin" onClick={() => setMin(100)}>
+                Set invalid min
+              </button>
+              <button id="setValidMin" onClick={() => setMin(0)}>
+                Change valid min
+              </button>
+            </>
+          );
+        };
+        cy.mount(<UpdatedEuiFieldNumber />);
+        cy.get('input').type('1');
+        checkIsValid();
+
+        cy.get('#setInvalidMin').click();
+        checkIsInvalid();
+        cy.get('#setValidMin').click();
+        checkIsValid();
+      });
+
+      it('max', () => {
+        const UpdatedEuiFieldNumber = () => {
+          const [max, setMax] = useState<number | undefined>();
+          return (
+            <>
+              <EuiFieldNumber max={max} />
+              <button id="setInvalidMax" onClick={() => setMax(0)}>
+                Set invalid max
+              </button>
+              <button id="setValidMax" onClick={() => setMax(10)}>
+                Change valid max
+              </button>
+            </>
+          );
+        };
+        cy.mount(<UpdatedEuiFieldNumber />);
+        cy.get('input').type('1');
+        checkIsValid();
+
+        cy.get('#setInvalidMax').click();
+        checkIsInvalid();
+        cy.get('#setValidMax').click();
+        checkIsValid();
+      });
+
+      it('step', () => {
+        const UpdatedEuiFieldNumber = () => {
+          const [step, setStep] = useState<number | undefined>();
+          return (
+            <>
+              <EuiFieldNumber step={step} />
+              <button id="setInvalidStep" onClick={() => setStep(1.5)}>
+                Set invalid step
+              </button>
+              <button id="setValidStep" onClick={() => setStep(1)}>
+                Change valid step
+              </button>
+            </>
+          );
+        };
+        cy.mount(<UpdatedEuiFieldNumber />);
+        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
@@ -107,7 +107,6 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
     readOnly,
     controlOnly,
     onKeyUp,
-    onBlur,
     ...rest
   } = props;
 
@@ -128,13 +127,12 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
     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<EuiFieldNumberProps> = (
           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}
       />
     </EuiValidatableControl>