Unable to select the values from the dropdown menu on the "Products > Add New > Product Catalog" page (#41093)

* Fix unable to select the values from the select tree control

* Add changelog file

packages/js/components/changelog/fix-41049

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix unable to select the values from the select tree control

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

@@ -126,7 +126,6 @@ export const SelectTreeMenu = ( {
 							) : (
 								<Tree
 									{ ...props }
-									id={ `${ props.id }-menu` }
 									ref={ ref }
 									items={ items }
 									onTreeBlur={ onClose }

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

@@ -45,16 +45,25 @@ export const SelectTree = function SelectTree( {
 	const selectTreeInstanceId = useInstanceId(
 		SelectTree,
 		'woocommerce-experimental-select-tree-control__dropdown'
-	);
+	) as string;
 	const menuInstanceId = useInstanceId(
 		SelectTree,
 		'woocommerce-select-tree-control__menu'
-	);
-	const isEventOutside = ( event: React.FocusEvent ) => {
-		return ! document
-			.querySelector( '.' + selectTreeInstanceId )
+	) as string;
+
+	function isEventOutside( event: React.FocusEvent ) {
+		const isInsideSelect = document
+			.getElementById( selectTreeInstanceId )
 			?.contains( event.relatedTarget );
-	};
+
+		const isInsidePopover = document
+			.getElementById( menuInstanceId )
+			?.closest(
+				'.woocommerce-experimental-select-tree-control__popover-menu'
+			)
+			?.contains( event.relatedTarget );
+		return ! ( isInsideSelect || isInsidePopover );
+	}
 
 	const recalculateInputValue = () => {
 		if ( onInputChange ) {
@@ -117,11 +126,11 @@ export const SelectTree = function SelectTree( {
 				// focus on the first element from the Popover
 				(
 					document.querySelector(
-						`.${ menuInstanceId } input, .${ menuInstanceId } button`
+						`#${ menuInstanceId } input, #${ menuInstanceId } button`
 					) as HTMLInputElement | HTMLButtonElement
 				 )?.focus();
 			}
-			if ( event.key === 'Tab' ) {
+			if ( event.key === 'Tab' || event.key === 'Escape' ) {
 				setIsOpen( false );
 				recalculateInputValue();
 			}
@@ -138,7 +147,8 @@ export const SelectTree = function SelectTree( {
 
 	return (
 		<div
-			className={ `woocommerce-experimental-select-tree-control__dropdown ${ selectTreeInstanceId }` }
+			id={ selectTreeInstanceId }
+			className={ `woocommerce-experimental-select-tree-control__dropdown` }
 			tabIndex={ -1 }
 		>
 			<div
@@ -217,8 +227,7 @@ export const SelectTree = function SelectTree( {
 						props.onSelect( item );
 					}
 				} }
-				id={ `${ props.id }-menu` }
-				className={ menuInstanceId.toString() }
+				id={ menuInstanceId }
 				ref={ ref }
 				isEventOutside={ isEventOutside }
 				isLoading={ isLoading }