Fix RangeControl reset from values out-of-range by multiple digits

packages/components/src/range-control/index.js

@@ -139,15 +139,14 @@ function RangeControl(
 				isResetPendent.current = true;
 			}
 		},
+		onBlur: () => {
+			if ( isResetPendent.current ) {
+				handleOnReset();
+				isResetPendent.current = false;
+			}
+		},
 	} );
 
-	const handleOnInputNumberBlur = () => {
-		if ( isResetPendent.current ) {
-			handleOnReset();
-			isResetPendent.current = false;
-		}
-	};
-
 	const handleOnReset = () => {
 		const resetValue = parseFloat( resetFallbackValue );
 
@@ -269,7 +268,6 @@ function RangeControl(
 						disabled={ disabled }
 						inputMode="decimal"
 						isShiftStepEnabled={ isShiftStepEnabled }
-						onBlur={ handleOnInputNumberBlur }
 						shiftStep={ shiftStep }
 						step={ step }
 						{ ...someNumberInputProps }

packages/components/src/range-control/utils.js

@@ -16,11 +16,18 @@ import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
  * @param {number|null}            props.value    Incoming value.
  * @param {number}                 props.max      Maximum valid value.
  * @param {number}                 props.min      Minimum valid value.
+ * @param {(event: Event) => void} props.onBlur   Callback for blur events.
  * @param {(next: number) => void} props.onChange Callback for changes.
  *
  * @return {Object} Assorted props for the input.
  */
-export function useUnimpededRangedNumberEntry( { max, min, onChange, value } ) {
+export function useUnimpededRangedNumberEntry( {
+	max,
+	min,
+	onBlur,
+	onChange,
+	value,
+} ) {
 	const ref = useRef();
 	const isDiverging = useRef( false );
 	/** @type {import('../input-control/types').InputChangeCallback}*/
@@ -32,6 +39,10 @@ export function useUnimpededRangedNumberEntry( { max, min, onChange, value } ) {
 		}
 		onChange( next );
 	};
+	const blurHandler = ( event ) => {
+		isDiverging.current = false;
+		onBlur?.( event );
+	};
 	// When the value entered in the input is out of range then a clamped value
 	// is sent through onChange and that goes on to update the input. In such
 	// circumstances this effect overwrites the input value with the entered
@@ -48,7 +59,14 @@ export function useUnimpededRangedNumberEntry( { max, min, onChange, value } ) {
 		}
 	}, [ value ] );
 
-	return { max, min, ref, value, onChange: changeHandler };
+	return {
+		max,
+		min,
+		ref,
+		value,
+		onBlur: blurHandler,
+		onChange: changeHandler,
+	};
 }
 
 /**