[EuiFieldNumber] Update native validity state on blur & report/surface native validation messages

src/components/form/field_number/field_number.spec.tsx

@@ -51,5 +51,16 @@ describe('EuiFieldNumber', () => {
       cy.get('input').click().type('2');
       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();
+    });
+
+    // TODO: Consider adding a Cypress visual snapshot/diff plugin here
+    // to confirm that the native browser validity report displays as expected
   });
 });

src/components/form/field_number/field_number.tsx

@@ -77,6 +77,16 @@ export type EuiFieldNumberProps = Omit<
      * @default false
      */
     compressed?: boolean;
+
+    /**
+     * By default, native browser invalidity messages will be reported on user input
+     * (e.g., if consumers exceed the set `min` or `max` range, or do not match `step` increments).
+     * These messages are displayed via the browser `reportValidity` API.
+     *
+     * If you would prefer to use your own error messaging, set this flag to `false`.
+     * @default true
+     */
+    reportNativeInvalidity?: boolean;
   };
 
 export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
@@ -101,7 +111,9 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
     inputRef,
     readOnly,
     controlOnly,
-    onKeyUp: _onKeyUp,
+    onKeyUp,
+    onBlur,
+    reportNativeInvalidity = true,
     ...rest
   } = props;
 
@@ -113,18 +125,19 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
     true | undefined
   >();
 
-  // Note that we can't use hook into `onChange` because browsers don't emit change events
-  // for invalid values - see https://github.com/facebook/react/issues/16554
-  const onKeyUp = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      _onKeyUp?.(e);
-
-      const { validity } = e.target as HTMLInputElement;
+  const checkNativeValidity = useCallback(
+    (inputEl: HTMLInputElement) => {
       // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
-      const isInvalid = !validity.valid || undefined;
+      const isInvalid = !inputEl.validity.valid || undefined;
       setIsNativelyInvalid(isInvalid);
+
+      // Some browser (i.e. Safari) don't make their native error messages visible -
+      // the `reportValidity` API more clearly surfaces these messages
+      if (isInvalid && reportNativeInvalidity) {
+        inputEl.reportValidity();
+      }
     },
-    [_onKeyUp]
+    [reportNativeInvalidity]
   );
 
   const numIconsClass = controlOnly
@@ -155,8 +168,17 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
         readOnly={readOnly}
         className={classes}
         ref={inputRef}
-        onKeyUp={onKeyUp}
         aria-invalid={isInvalid == null ? isNativelyInvalid : isInvalid}
+        onKeyUp={(e) => {
+          // Note that we can't use `onChange` because browsers don't emit change events
+          // for invalid text - see https://github.com/facebook/react/issues/16554
+          onKeyUp?.(e);
+          checkNativeValidity(e.currentTarget);
+        }}
+        onBlur={(e) => {
+          onBlur?.(e);
+          checkNativeValidity(e.currentTarget);
+        }}
         {...rest}
       />
     </EuiValidatableControl>