From 8d8d315d661b4f1f9121d0e643342e44824447ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?=
 <mdperez86@gmail.com>
Date: Tue, 8 Aug 2023 10:50:11 -0400
Subject: [PATCH] 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   |  4 ++++
 .../attribute-control/new-attribute-modal.tsx    | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 packages/js/product-editor/changelog/add-39409

diff --git a/packages/js/product-editor/changelog/add-39409 b/packages/js/product-editor/changelog/add-39409
new file mode 100644
index 00000000000..a25144a2f1b
--- /dev/null
+++ b/packages/js/product-editor/changelog/add-39409
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Focus the first attribute field when opening the modal
diff --git a/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx b/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx
index bafe2d3ceab..e67ca671432 100644
--- a/packages/js/product-editor/src/components/attribute-control/new-attribute-modal.tsx
+++ b/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 >