RangeControl: Fix number input change interaction

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

@@ -30,13 +30,13 @@ import {
 	AfterIconWrapper,
 	BeforeIconWrapper,
 	InputRange,
-	InputNumber,
 	Root,
 	Track,
 	ThumbWrapper,
 	Thumb,
 	Wrapper,
 } from './styles/range-control-styles';
+import InputField from './input-field';
 import { useRtl } from '../utils/rtl';
 
 const BaseRangeControl = forwardRef(
@@ -61,6 +61,7 @@ const BaseRangeControl = forwardRef(
 			onFocus = noop,
 			onMouseMove = noop,
 			onMouseLeave = noop,
+			resetFallbackValue,
 			renderTooltipContent = ( v ) => v,
 			showTooltip: showTooltipProp,
 			step = 1,
@@ -122,13 +123,6 @@ const BaseRangeControl = forwardRef(
 		const enableTooltip = showTooltipProp !== false && isFinite( value );
 
 		const handleOnChange = ( event ) => {
-			if (
-				event.target.checkValidity &&
-				! event.target.checkValidity()
-			) {
-				return;
-			}
-
 			const nextValue = parseFloat( event.target.value );
 
 			if ( isNaN( nextValue ) ) {
@@ -141,7 +135,13 @@ const BaseRangeControl = forwardRef(
 		};
 
 		const handleOnReset = () => {
-			setValue( null );
+			let resetValue = parseFloat( resetFallbackValue );
+
+			if ( isNaN( resetValue ) ) {
+				resetValue = null;
+			}
+
+			setValue( resetValue );
 			onChange( undefined );
 		};
 
@@ -250,16 +250,14 @@ const BaseRangeControl = forwardRef(
 						</AfterIconWrapper>
 					) }
 					{ withInputField && (
-						<InputNumber
-							aria-label={ label }
-							className="components-range-control__number"
+						<InputField
 							disabled={ disabled }
-							inputMode="decimal"
+							label={ label }
 							max={ max }
 							min={ min }
 							onChange={ handleOnChange }
+							onReset={ handleOnReset }
 							step={ step }
-							type="number"
 							value={ inputSliderValue }
 						/>
 					) }

packages/components/src/range-control/input-field.js

@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+
+import { noop } from 'lodash';
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import { useControlledState } from '../utils/hooks';
+import { InputNumber } from './styles/range-control-styles';
+
+export default function InputField( {
+	label,
+	onBlur = noop,
+	onChange = noop,
+	onReset = noop,
+	onKeyDown = noop,
+	value: valueProp,
+	...props
+} ) {
+	/**
+	 * This component stores an internal (input) value state, derived from
+	 * the incoming value prop.
+	 *
+	 * This allows for the <input /> to be updated independently before the
+	 * value is applied and propagated. This independent updating action is
+	 * necessary to accommodate individual keystroke values that may not
+	 * be considered "valid" (e.g. within the min - max range).
+	 */
+	const [ value, setValue ] = useControlledState( valueProp );
+
+	const handleOnReset = ( event ) => {
+		onReset( event );
+		setValue( '' );
+	};
+
+	const handleOnSubmit = ( event ) => {
+		const nextValue = parseFloat( event.target.value );
+
+		if ( isNaN( nextValue ) ) {
+			handleOnReset();
+			return;
+		}
+
+		// Only propagate the event if the value is valid.
+		if ( event.target.checkValidity && ! event.target.checkValidity() ) {
+			// Otherwise... reset to initial value
+			setValue( valueProp );
+			return;
+		}
+		onChange( event );
+	};
+
+	const handleOnBlur = ( event ) => {
+		onBlur( event );
+		handleOnSubmit( event );
+	};
+
+	const handleOnChange = ( event ) => {
+		setValue( event.target.value );
+
+		/**
+		 * Prevent submitting if changes are invalid.
+		 * This only applies to values being entered via KEY_DOWN.
+		 *
+		 * Pressing the up/down arrows of the HTML input also triggers a
+		 * change event. However, those values will be (pre)validated by the
+		 * HTML input.
+		 */
+		if ( event.target.checkValidity && ! event.target.checkValidity() ) {
+			return;
+		}
+
+		handleOnSubmit( event );
+	};
+
+	const handleOnKeyDown = ( event ) => {
+		const { keyCode } = event;
+		onKeyDown( event );
+
+		if ( keyCode === ENTER ) {
+			event.preventDefault();
+			handleOnSubmit( event );
+		}
+	};
+
+	return (
+		<InputNumber
+			aria-label={ label }
+			className="components-range-control__number"
+			inputMode="decimal"
+			onBlur={ handleOnBlur }
+			onChange={ handleOnChange }
+			onKeyDown={ handleOnKeyDown }
+			type="number"
+			value={ value }
+			{ ...props }
+		/>
+	);
+}

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

@@ -66,7 +66,7 @@ function useMarks( { marks, min = 0, max = 100, step = 1, value = 0 } ) {
 
 	const isCustomMarks = Array.isArray( marks );
 
-	const markCount = ( max - min ) / step;
+	const markCount = Math.round( ( max - min ) / step );
 	const marksArray = isCustomMarks
 		? marks
 		: [ ...Array( markCount + 1 ) ].map( ( _, index ) => ( {
@@ -77,7 +77,7 @@ function useMarks( { marks, min = 0, max = 100, step = 1, value = 0 } ) {
 		const markValue = mark.value !== undefined ? mark.value : value;
 
 		const key = `mark-${ index }`;
-		const isFilled = markValue * step <= value;
+		const isFilled = markValue * step + min <= value;
 		const offset = `${ ( markValue / markCount ) * 100 }%`;
 
 		const offsetStyle = {