Product Block Editor: autofocus attributes combobox component

packages/js/product-editor/changelog/update-product-block-editor-add-autofocus-to-attributes-combobox

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Product Block Editor: autofocus attributes combobox component

packages/js/product-editor/src/components/attribute-combobox-field/index.tsx

@@ -95,6 +95,7 @@ const AttributesComboboxControl: React.FC<
 	items = [],
 	instanceNumber = 0,
 	isLoading = false,
+	autoFocus = false,
 	onChange,
 } ) => {
 	const [ createNewAttributeOption, updateCreateNewAttributeOption ] =
@@ -178,6 +179,23 @@ const AttributesComboboxControl: React.FC<
 		}
 	}, [ instanceNumber ] );
 
+	// Autofocus the input.
+	useEffect( () => {
+		if ( ! comboRef?.current ) {
+			return;
+		}
+
+		const inputElement = comboRef.current.querySelector(
+			'input.components-combobox-control__input'
+		) as HTMLInputElement;
+
+		if ( ! inputElement || ! autoFocus ) {
+			return;
+		}
+
+		inputElement.focus();
+	}, [ autoFocus ] );
+
 	if ( ! help ) {
 		help = ! attributeSelected ? (
 			<div className="woocommerce-attributes-combobox-help">

packages/js/product-editor/src/components/attribute-combobox-field/types.ts

@@ -20,6 +20,7 @@ export type AttributesComboboxControlComponent = {
 	label?: string;
 	help?: JSX.Element | string | null;
 	isLoading: boolean;
+	autoFocus?: boolean;
 	placeholder?: string;
 	disabled?: boolean;
 	instanceNumber?: number;

packages/js/product-editor/src/components/attribute-control/attribute-table-row.tsx

@@ -211,6 +211,8 @@ export const AttributeTableRow: React.FC< AttributeTableRowProps > = ( {
 					current={ attribute }
 					items={ filteredAttributes }
 					isLoading={ isLoadingAttributes }
+					// eslint-disable-next-line jsx-a11y/no-autofocus
+					autoFocus={ true }
 					onChange={ ( nextAttribute ) => {
 						if ( nextAttribute.id === attributeId ) {
 							return;