[EuiFieldNumber] Clean up native :invalid detection

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap

@@ -134,7 +134,6 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
           >
             <input
               aria-describedby="generated-id generated-id"
-              aria-invalid="false"
               aria-label="Time value"
               class="euiFieldNumber euiFieldNumber--compressed"
               type="number"

src/components/form/field_number/__snapshots__/field_number.test.tsx.snap

@@ -6,12 +6,10 @@ exports[`EuiFieldNumber is rendered 1`] = `
   fullwidth="false"
   icon="warning"
   inputid="1"
-  isinvalid="false"
   isloading="false"
 >
   <eui-validatable-control>
     <input
-      aria-invalid="false"
       aria-label="aria-label"
       class="euiFieldNumber testClass1 testClass2 euiFieldNumber--withIcon"
       data-test-subj="test subject string"
@@ -30,7 +28,6 @@ exports[`EuiFieldNumber is rendered 1`] = `
 exports[`EuiFieldNumber props controlOnly is rendered 1`] = `
 <eui-validatable-control>
   <input
-    aria-invalid="false"
     class="euiFieldNumber"
     type="number"
     value=""
@@ -42,12 +39,10 @@ exports[`EuiFieldNumber props fullWidth is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="true"
-  isinvalid="false"
   isloading="false"
 >
   <eui-validatable-control>
     <input
-      aria-invalid="false"
       class="euiFieldNumber euiFieldNumber--fullWidth"
       type="number"
       value=""
@@ -80,12 +75,10 @@ exports[`EuiFieldNumber props isLoading is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  isinvalid="false"
   isloading="true"
 >
   <eui-validatable-control>
     <input
-      aria-invalid="false"
       class="euiFieldNumber euiFormControlLayout--1icons euiFieldNumber-isLoading"
       type="number"
       value=""
@@ -98,13 +91,11 @@ exports[`EuiFieldNumber props readOnly is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  isinvalid="false"
   isloading="false"
   readonly="true"
 >
   <eui-validatable-control>
     <input
-      aria-invalid="false"
       class="euiFieldNumber"
       readonly=""
       type="number"
@@ -118,12 +109,10 @@ exports[`EuiFieldNumber props value no initial value 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  isinvalid="false"
   isloading="false"
 >
   <eui-validatable-control>
     <input
-      aria-invalid="false"
       class="euiFieldNumber"
       type="number"
       value=""
@@ -136,12 +125,10 @@ exports[`EuiFieldNumber props value value is number 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  isinvalid="false"
   isloading="false"
 >
   <eui-validatable-control>
     <input
-      aria-invalid="false"
       class="euiFieldNumber"
       type="number"
       value="0"

src/components/form/field_number/field_number.tsx

@@ -11,13 +11,11 @@ import React, {
   Ref,
   FunctionComponent,
   useState,
-  useRef,
   useCallback,
 } from 'react';
 import { CommonProps } from '../../common';
 import classNames from 'classnames';
 
-import { useCombinedRefs } from '../../../services';
 import { IconType } from '../../icon';
 
 import { EuiValidatableControl } from '../validatable_control';
@@ -103,29 +101,30 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
     inputRef,
     readOnly,
     controlOnly,
-    onKeyDown: _onKeyDown,
+    onKeyUp: _onKeyUp,
     ...rest
   } = props;
 
   // Attempt to determine additional invalid state. The native number input
   // will set :invalid state automatically, but we need to also set
   // `aria-invalid` as well as display an icon. We also want to *not* set this on
   // EuiValidatableControl, in order to not override custom validity messages
-  const [isNativelyInvalid, setIsNativelyInvalid] = useState(false);
-  const validityRef = useRef<HTMLInputElement | null>(null);
-  const setRefs = useCombinedRefs([validityRef, inputRef]);
+  const [isNativelyInvalid, setIsNativelyInvalid] = useState<
+    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 onKeyDown = useCallback(
+  const onKeyUp = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
-      _onKeyDown?.(e);
-      // Wait a beat before checking validity - we can't use `e.target` as it's stale
-      requestAnimationFrame(() => {
-        setIsNativelyInvalid(!validityRef.current!.validity.valid);
-      });
+      _onKeyUp?.(e);
+
+      const { validity } = e.target as HTMLInputElement;
+      // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
+      const isInvalid = !validity.valid || undefined;
+      setIsNativelyInvalid(isInvalid);
     },
-    [_onKeyDown]
+    [_onKeyUp]
   );
 
   const numIconsClass = controlOnly
@@ -155,9 +154,9 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
         placeholder={placeholder}
         readOnly={readOnly}
         className={classes}
-        ref={setRefs}
-        onKeyDown={onKeyDown}
-        aria-invalid={isInvalid || isNativelyInvalid}
+        ref={inputRef}
+        onKeyUp={onKeyUp}
+        aria-invalid={isInvalid == null ? isNativelyInvalid : isInvalid}
         {...rest}
       />
     </EuiValidatableControl>

src/components/form/range/__snapshots__/dual_range.test.tsx.snap

@@ -63,7 +63,6 @@ exports[`EuiDualRange input props can be applied to min and max inputs 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <input
-        aria-invalid="false"
         aria-label="Min value"
         class="euiFieldNumber euiRangeInput euiRangeInput--min emotion-euiRangeInput"
         max="8"
@@ -113,7 +112,6 @@ exports[`EuiDualRange input props can be applied to min and max inputs 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <input
-        aria-invalid="false"
         aria-label="Max value"
         class="euiFieldNumber euiRangeInput euiRangeInput--max emotion-euiRangeInput"
         max="10"
@@ -323,7 +321,6 @@ exports[`EuiDualRange props inputs should render 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <input
-        aria-invalid="false"
         aria-label="aria-label"
         class="euiFieldNumber euiRangeInput euiRangeInput--min emotion-euiRangeInput"
         max="8"
@@ -375,7 +372,6 @@ exports[`EuiDualRange props inputs should render 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <input
-        aria-invalid="false"
         aria-label="aria-label"
         class="euiFieldNumber euiRangeInput euiRangeInput--max emotion-euiRangeInput"
         max="100"
@@ -532,7 +528,6 @@ exports[`EuiDualRange props loading should display when showInput="inputWithPopo
           class="euiFormControlLayout__childrenWrapper"
         >
           <input
-            aria-invalid="false"
             class="euiFieldNumber euiFormControlLayoutDelimited__input emotion-euiRangeInput"
             max="8"
             min="0"
@@ -551,7 +546,6 @@ exports[`EuiDualRange props loading should display when showInput="inputWithPopo
             </span>
           </div>
           <input
-            aria-invalid="false"
             class="euiFieldNumber euiFormControlLayoutDelimited__input emotion-euiRangeInput"
             max="100"
             min="1"
@@ -621,7 +615,6 @@ exports[`EuiDualRange props slider should display in popover 1`] = `
           class="euiFormControlLayout__childrenWrapper"
         >
           <input
-            aria-invalid="false"
             class="euiFieldNumber euiFormControlLayoutDelimited__input emotion-euiRangeInput"
             max="8"
             min="0"
@@ -640,7 +633,6 @@ exports[`EuiDualRange props slider should display in popover 1`] = `
             </span>
           </div>
           <input
-            aria-invalid="false"
             class="euiFieldNumber euiFormControlLayoutDelimited__input emotion-euiRangeInput"
             max="100"
             min="1"

src/components/form/range/__snapshots__/range.test.tsx.snap

@@ -255,7 +255,6 @@ exports[`EuiRange props input should render 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <input
-        aria-invalid="false"
         aria-label="aria-label"
         class="euiFieldNumber euiRangeInput euiRangeInput--max emotion-euiRangeInput"
         data-test-subj="test subject string"
@@ -355,7 +354,6 @@ exports[`EuiRange props loading should display when showInput="inputWithPopover"
           class="euiFormControlLayout__childrenWrapper"
         >
           <input
-            aria-invalid="false"
             aria-label="aria-label"
             class="euiFieldNumber euiRangeInput euiRangeInput--max emotion-euiRangeInput euiFormControlLayout--1icons euiFieldNumber-isLoading"
             data-test-subj="test subject string"
@@ -428,7 +426,6 @@ exports[`EuiRange props slider should display in popover 1`] = `
           class="euiFormControlLayout__childrenWrapper"
         >
           <input
-            aria-invalid="false"
             aria-label="aria-label"
             class="euiFieldNumber euiRangeInput euiRangeInput--max emotion-euiRangeInput"
             data-test-subj="test subject string"

src/components/form/range/__snapshots__/range_input.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`EuiRangeInput renders 1`] = `
     class="euiFormControlLayout__childrenWrapper"
   >
     <input
-      aria-invalid="false"
       class="euiFieldNumber euiRangeInput euiRangeInput--max emotion-euiRangeInput"
       max="100"
       min="0"

upcoming_changelogs/6741.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiFieldNumber`'s native browser validity detection causing extra unnecessary rerenders