Product Editor: Fix select on focus for currency and number fields (#41171)

packages/js/product-editor/changelog/fix-currency-number-select-in-focus

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix selection in currency and number fields to only select if field still has focus.

packages/js/product-editor/src/hooks/use-currency-input-props.ts

@@ -8,7 +8,7 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { useProductHelper } from './use-product-helper';
-import { formatCurrencyDisplayValue } from '../utils';
+import { deferSelectInFocus, formatCurrencyDisplayValue } from '../utils';
 
 export type CurrencyInputProps = {
 	prefix: string;
@@ -51,18 +51,7 @@ export const useCurrencyInputProps = ( {
 			return sanitizePrice( String( val ) );
 		},
 		onFocus( event: React.FocusEvent< HTMLInputElement > ) {
-			// In some browsers like safari .select() function inside
-			// the onFocus event doesn't work as expected because it
-			// conflicts with onClick the first time user click the
-			// input. Using setTimeout defers the text selection and
-			// avoid the unexpected behaviour.
-			setTimeout(
-				function deferSelection( element: HTMLInputElement ) {
-					element.select();
-				},
-				0,
-				event.currentTarget
-			);
+			deferSelectInFocus( event.currentTarget );
 			if ( onFocus ) {
 				onFocus( event );
 			}

packages/js/product-editor/src/hooks/use-number-input-props.ts

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { useProductHelper } from './use-product-helper';
+import { deferSelectInFocus } from '../utils';
 
 export type NumberInputProps = {
 	value: string;
@@ -28,18 +29,7 @@ export const useNumberInputProps = ( {
 	const numberInputProps: NumberInputProps = {
 		value: formatNumber( value ),
 		onFocus( event: React.FocusEvent< HTMLInputElement > ) {
-			// In some browsers like safari .select() function inside
-			// the onFocus event doesn't work as expected because it
-			// conflicts with onClick the first time user click the
-			// input. Using setTimeout defers the text selection and
-			// avoid the unexpected behaviour.
-			setTimeout(
-				function deferSelection( element: HTMLInputElement ) {
-					element.select();
-				},
-				0,
-				event.currentTarget
-			);
+			deferSelectInFocus( event.currentTarget );
 			if ( onFocus ) {
 				onFocus( event );
 			}

packages/js/product-editor/src/utils/defer-select-in-focus.ts

@@ -0,0 +1,17 @@
+export function deferSelectInFocus( element: HTMLInputElement ) {
+	// In some browsers like safari .select() function inside
+	// the onFocus event doesn't work as expected because it
+	// conflicts with onClick the first time user click the
+	// input. Using setTimeout defers the text selection and
+	// avoid the unexpected behaviour.
+	setTimeout(
+		function deferSelection( originalElement: HTMLInputElement ) {
+			if ( element.ownerDocument.activeElement === originalElement ) {
+				// We still have focus, so select the content.
+				originalElement.select();
+			}
+		},
+		0,
+		element
+	);
+}

packages/js/product-editor/src/utils/index.ts

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { AUTO_DRAFT_NAME } from './constants';
+import { deferSelectInFocus } from './defer-select-in-focus';
 import { formatCurrencyDisplayValue } from './format-currency-display-value';
 import { getCheckboxTracks } from './get-checkbox-tracks';
 import { getCurrencySymbolProps } from './get-currency-symbol-props';
@@ -30,6 +31,7 @@ export * from './sift';
 
 export {
 	AUTO_DRAFT_NAME,
+	deferSelectInFocus,
 	formatCurrencyDisplayValue,
 	getCheckboxTracks,
 	getCurrencySymbolProps,