Fix: use checkValidity() to perform the validation in RangeControl

packages/components/CHANGELOG.md

@@ -14,6 +14,7 @@
 
 - Resolves a conflict where two instance of Slot would produce an inconsistent or duplicated rendering output.
 - Allow years between 0 and 1970 in DateTime component.
+- Fix a bug that made `RangeControl` not work as expected with float values; Started relying on the browser validations instead of our own.
 
 ### New Feature
 

packages/components/src/range-control/README.md

@@ -184,6 +184,14 @@ The maximum value accepted. If higher values are inserted onChange will not be c
 - Type: `Number`
 - Required: No
 
+#### required
+
+If true having the input field empty is invalid if false having the input field empty is valid.
+
+- Type: `Boolean`
+- Required: Yes
+- Default: true
+
 ## Related components
 
 - To collect a numerical input in a text field, use the `TextControl` component.

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

@@ -30,6 +30,7 @@ function RangeControl( {
 	min,
 	max,
 	setState,
+	required = true,
 	...props
 } ) {
 	const id = `inspector-range-control-${ instanceId }`;
@@ -48,14 +49,9 @@ function RangeControl( {
 
 	const onChangeValue = ( event ) => {
 		const newValue = event.target.value;
-		const newNumericValue = parseInt( newValue, 10 );
 		// If the input value is invalid temporarily save it to the state,
 		// without calling on change.
-		if (
-			isNaN( newNumericValue ) ||
-			( min !== undefined && newNumericValue < min ) ||
-			( max !== undefined && newNumericValue > max )
-		) {
+		if ( ! event.target.checkValidity() ) {
 			setState( {
 				currentInput: newValue,
 			} );
@@ -64,9 +60,9 @@ function RangeControl( {
 		// The input is valid, reset the local state property used to temporaly save the value,
 		// and call onChange with the new value as a number.
 		resetCurrentInput();
-		onChange( newNumericValue );
+		onChange( parseFloat( newValue ) );
 	};
-	const initialSliderValue = isFinite( value ) ?
+	const initialSliderValue = isFinite( currentInputValue ) ?
 		currentInputValue :
 		initialPosition || '';
 
@@ -82,6 +78,7 @@ function RangeControl( {
 				className="components-range-control__slider"
 				id={ id }
 				type="range"
+				required={ required }
 				value={ initialSliderValue }
 				onChange={ onChangeValue }
 				aria-describedby={ !! help ? id + '__help' : undefined }
@@ -92,6 +89,7 @@ function RangeControl( {
 			<input
 				className="components-range-control__number"
 				type="number"
+				required={ required }
 				onChange={ onChangeValue }
 				aria-label={ label }
 				value={ currentInputValue }

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

@@ -42,13 +42,23 @@ describe( 'RangeControl', () => {
 			TestUtils.Simulate.change(
 				rangeInputElement(),
 				{
-					target: { value: '5' },
+					target: {
+						value: '5',
+						checkValidity() {
+							return true;
+						},
+					},
 				}
 			);
 			TestUtils.Simulate.change(
 				numberInputElement(),
 				{
-					target: { value: '10' },
+					target: {
+						value: '10',
+						checkValidity() {
+							return true;
+						},
+					},
 				}
 			);
 
@@ -96,7 +106,12 @@ describe( 'RangeControl', () => {
 			TestUtils.Simulate.change(
 				numberInputElement(),
 				{
-					target: { value: '10' },
+					target: {
+						value: '10',
+						checkValidity() {
+							return false;
+						},
+					},
 				}
 			);
 
@@ -116,7 +131,12 @@ describe( 'RangeControl', () => {
 			TestUtils.Simulate.change(
 				numberInputElement(),
 				{
-					target: { value: '21' },
+					target: {
+						value: '21',
+						checkValidity() {
+							return false;
+						},
+					},
 				}
 			);
 
@@ -136,14 +156,24 @@ describe( 'RangeControl', () => {
 			TestUtils.Simulate.change(
 				numberInputElement(),
 				{
-					target: { value: '10' },
+					target: {
+						value: '10',
+						checkValidity() {
+							return false;
+						},
+					},
 				}
 			);
 
 			TestUtils.Simulate.change(
 				numberInputElement(),
 				{
-					target: { value: '21' },
+					target: {
+						value: '21',
+						checkValidity() {
+							return false;
+						},
+					},
 				}
 			);
 
@@ -152,7 +182,12 @@ describe( 'RangeControl', () => {
 			TestUtils.Simulate.change(
 				numberInputElement(),
 				{
-					target: { value: '14' },
+					target: {
+						value: '14',
+						checkValidity() {
+							return true;
+						},
+					},
 				}
 			);
 
@@ -171,7 +206,12 @@ describe( 'RangeControl', () => {
 			TestUtils.Simulate.change(
 				numberInputElement(),
 				{
-					target: { value: '1' },
+					target: {
+						value: '1',
+						checkValidity() {
+							return false;
+						},
+					},
 				}
 			);
 
@@ -190,7 +230,12 @@ describe( 'RangeControl', () => {
 			TestUtils.Simulate.change(
 				numberInputElement(),
 				{
-					target: { value: '-101' },
+					target: {
+						value: '-101',
+						checkValidity() {
+							return false;
+						},
+					},
 				}
 			);
 
@@ -199,7 +244,12 @@ describe( 'RangeControl', () => {
 			TestUtils.Simulate.change(
 				numberInputElement(),
 				{
-					target: { value: '-49' },
+					target: {
+						value: '-49',
+						checkValidity() {
+							return false;
+						},
+					},
 				}
 			);
 
@@ -208,7 +258,49 @@ describe( 'RangeControl', () => {
 			TestUtils.Simulate.change(
 				numberInputElement(),
 				{
-					target: { value: '-50' },
+					target: {
+						value: '-50',
+						checkValidity() {
+							return true;
+						},
+					},
+				}
+			);
+
+			expect( onChange ).toHaveBeenCalled();
+		} );
+		it( 'takes into account the step starting from min', () => {
+			const onChange = jest.fn();
+			const wrapper = getWrapper( { onChange, min: 0.1, step: 0.125, value: 0.1 } );
+
+			const numberInputElement = () => TestUtils.findRenderedDOMComponentWithClass(
+				wrapper,
+				'components-range-control__number'
+			);
+
+			TestUtils.Simulate.change(
+				numberInputElement(),
+				{
+					target: {
+						value: '0.125',
+						checkValidity() {
+							return false;
+						},
+					},
+				}
+			);
+
+			expect( onChange ).not.toHaveBeenCalled();
+
+			TestUtils.Simulate.change(
+				numberInputElement(),
+				{
+					target: {
+						value: '0.225',
+						checkValidity() {
+							return true;
+						},
+					},
 				}
 			);