Fix when adding new attributes, input fields keep the focus styling (#40519)

* Fix invalid focus state of the experimental select control

* Add changelog file

* Fix regression setting readOnlyWhenClosed to false by default

* Add changelog file

packages/js/components/changelog/fix-40171

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix invalid focus state of the experimental select control

packages/js/components/src/experimental-select-control/menu.scss

@@ -17,13 +17,14 @@
 }
 .woocommerce-experimental-select-control__popover-menu {
 	.components-popover__content {
-		max-height: 300px;
-		overflow-y: scroll;
+		overflow: hidden;
 	}
 }
 .woocommerce-experimental-select-control__popover-menu-container {
 	margin: 0;
 	width: 100%;
+	max-height: 300px;
+	overflow-y: scroll;
 
 	> .category-field-dropdown__item:not(:first-child) {
 		.category-field-dropdown__item-content {

packages/js/components/src/experimental-select-control/select-control.tsx

@@ -15,6 +15,7 @@ import {
 	useEffect,
 	createElement,
 	Fragment,
+	useRef,
 } from '@wordpress/element';
 import { chevronDown } from '@wordpress/icons';
 
@@ -138,11 +139,13 @@ function SelectControl< ItemType = DefaultItemType >( {
 	const instanceId = useInstanceId(
 		SelectControl,
 		'woocommerce-experimental-select-control'
-	);
+	) as string;
 
 	const innerInputClassName =
 		'woocommerce-experimental-select-control__input';
 
+	const selectControlWrapperRef = useRef< HTMLDivElement >( null );
+
 	let selectedItems = selected === null ? [] : selected;
 	selectedItems = Array.isArray( selectedItems )
 		? selectedItems
@@ -186,6 +189,7 @@ function SelectControl< ItemType = DefaultItemType >( {
 		openMenu,
 		closeMenu,
 	} = useCombobox< ItemType | null >( {
+		id: instanceId,
 		initialSelectedItem: singleSelectedItem,
 		inputValue,
 		items: filteredItems,
@@ -246,12 +250,15 @@ function SelectControl< ItemType = DefaultItemType >( {
 	} );
 
 	const isEventOutside = ( event: React.FocusEvent ) => {
-		const inputClasses = event?.target?.className;
+		const selectControlWrapperElement = selectControlWrapperRef.current;
+		const menuElement = document.getElementById( `${ instanceId }-menu` );
+		const parentPopoverMenuElement = menuElement?.closest(
+			'.woocommerce-experimental-select-control__popover-menu'
+		);
+
 		return (
-			! document
-				.querySelector( '.' + instanceId )
-				?.contains( event.relatedTarget ) &&
-			! inputClasses.includes( innerInputClassName )
+			! selectControlWrapperElement?.contains( event.relatedTarget ) &&
+			! parentPopoverMenuElement?.contains( event.relatedTarget )
 		);
 	};
 
@@ -276,10 +283,11 @@ function SelectControl< ItemType = DefaultItemType >( {
 
 	return (
 		<div
+			id={ instanceId }
+			ref={ selectControlWrapperRef }
 			className={ classnames(
 				'woocommerce-experimental-select-control',
 				className,
-				instanceId,
 				{
 					'is-read-only': isReadOnly,
 					'is-focused': isFocused,

packages/js/product-editor/changelog/fix-40171

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix regression setting readOnlyWhenClosed to false by default on attribute term input field

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

@@ -193,7 +193,6 @@ export const EditAttributeModal: React.FC< EditAttributeModalProps > = ( {
 									terms: val,
 								} );
 							} }
-							readOnlyWhenClosed={ false }
 						/>
 					) : (
 						<CustomAttributeTermInputField

packages/js/product-editor/src/components/attribute-term-input-field/attribute-term-input-field.tsx

@@ -61,7 +61,7 @@ export const AttributeTermInputField: React.FC<
 	attributeId,
 	label = '',
 	autoCreateOnSelect = true,
-	readOnlyWhenClosed = true,
+	readOnlyWhenClosed = false,
 } ) => {
 	const attributeTermInputId = useRef(
 		`woocommerce-attribute-term-field-${ ++uniqueId }`