Set internal SLA only when not calling onChange to reduce visual glit…

…ches

packages/components/src/color-picker/hsl-input.tsx

@@ -41,21 +41,21 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 	const updateHSLAValue = (
 		partialNewValue: Partial< typeof colorPropHSLA >
 	) => {
-		// Update internal HSLA color.
-		setInternalHSLA( ( prevValue ) => ( {
-			...prevValue,
-			...partialNewValue,
-		} ) );
-
 		const nextOnChangeValue = colord( {
 			...colorValue,
 			...partialNewValue,
 		} );
 
 		// Fire `onChange` only if the resulting color is different from the
 		// current one.
+		// Otherwise, update the internal HSLA color to cause a re-render.
 		if ( ! color.isEqual( nextOnChangeValue ) ) {
 			onChange( nextOnChangeValue );
+		} else {
+			setInternalHSLA( ( prevHSLA ) => ( {
+				...prevHSLA,
+				...partialNewValue,
+			} ) );
 		}
 	};