Focus the first attribute field when opening the modal (#39549)

* Focus the first attribute field on modal shown

* Add changelog file

* Remove setTimeout to focus the attribute dropdown field

packages/js/product-editor/changelog/add-39409

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Focus the first attribute field when opening the modal

packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx

@@ -2,7 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState, createElement, Fragment } from '@wordpress/element';
+import {
+	useState,
+	createElement,
+	Fragment,
+	useEffect,
+} from '@wordpress/element';
 import { trash } from '@wordpress/icons';
 import {
 	Form,
@@ -201,6 +206,15 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 		}
 	};
 
+	useEffect( function focusFirstAttributeField() {
+		const firstAttributeFieldLabel =
+			document.querySelector< HTMLLabelElement >(
+				'.woocommerce-new-attribute-modal__table-row .woocommerce-attribute-input-field label'
+			);
+
+		firstAttributeFieldLabel?.focus();
+	}, [] );
+
 	return (
 		<>
 			<Form< AttributeForm >