Fix UnitControl resets unit when value is cleared (WordPress#39531)

* Avoid setting unit from effect hook if parsed to `undefined` * Add unit test * Add changelog entry * Remove duplicated `Bug Fix` section in the CHANGELOG Co-authored-by: Marco Ciampini <[email protected]>
jostnes · Mar 23, 2022 · 8b1c4e4 · 8b1c4e4
1 parent 08d22fd
commit 8b1c4e4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -19,6 +19,7 @@
 ### Bug Fix
 
 -   `NumberControl`: commit (and constrain) value on `blur` event ([#39186](https://github.com/WordPress/gutenberg/pull/39186)).
+-   Fix `UnitControl`'s reset of unit when the quantity value is cleared. ([#39531](https://github.com/WordPress/gutenberg/pull/39531/)).
 
 ### Deprecation
 

diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
@@ -95,7 +95,9 @@ function UnforwardedUnitControl(
 	);
 
 	useEffect( () => {
-		setUnit( parsedUnit );
+		if ( parsedUnit !== undefined ) {
+			setUnit( parsedUnit );
+		}
 	}, [ parsedUnit ] );
 
 	// Stores parsed value for hand-off in state reducer.

diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js
@@ -365,6 +365,25 @@ describe( 'UnitControl', () => {
 			await waitFor( () => expect( selectA ).toHaveValue( 'vw' ) );
 			expect( selectB ).toHaveValue( 'vw' );
 		} );
+
+		it( 'should maintain the chosen non-default unit when value is cleared', async () => {
+			const units = [
+				{ value: 'pt', label: 'pt' },
+				{ value: 'vmax', label: 'vmax' },
+			];
+
+			const { user } = render(
+				<UnitControl units={ units } value="5" />
+			);
+
+			const select = getSelect();
+			await user.selectOptions( select, [ 'vmax' ] );
+
+			const input = getInput();
+			await user.clear( input );
+
+			expect( select ).toHaveValue( 'vmax' );
+		} );
 	} );
 
 	describe( 'Unit Parser', () => {