Components: Select Control dropdown styling issues (#39989)

* Fix select control dropdown menu width, double scroll and item aligment

* Fix attributes dropdown jumping on focus and slot position

* Add changelog files

* Fix double scroll and label margin on Category Select

packages/js/components/changelog/add-39875

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix select control dropdown menu double scroll and width

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

@@ -1,5 +1,8 @@
 .woocommerce-experimental-select-control__menu-item {
 	padding: $gap-small;
 	margin: 0;
-}
 
+	.components-base-control__field {
+		margin-bottom: 0;
+	}
+}

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

@@ -2,26 +2,30 @@
 	position: absolute;
 	width: 100%;
 	top: 100%;
-	left: 0;
+	left: -1px;
 	margin-top: $gap-smaller;
 	box-sizing: border-box;
 }
 
 .components-popover.woocommerce-experimental-select-control__popover-menu {
 	background: $studio-white;
-	border: 1px solid $studio-gray-5;
 	border-radius: 3px;
 	display: none;
 	&.is-open.has-results {
 		display: block;
 	}
 }
-.woocommerce-experimental-select-control__popover-menu-container {
+.woocommerce-experimental-select-control__popover-menu {
-	margin: 0;
+	.components-popover__content {
 		max-height: 300px;
 		overflow-y: scroll;
+	}
+}
+.woocommerce-experimental-select-control__popover-menu-container {
+	margin: 0;
+	width: 100%;
 
-	> .category-field-dropdown__item:not( :first-child ) {
+	> .category-field-dropdown__item:not(:first-child) {
 		.category-field-dropdown__item-content {
 			border-top: 1px solid $gray-200;
 		}

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

@@ -7,7 +7,6 @@ import {
 	createElement,
 	useEffect,
 	useRef,
-	useState,
 	createPortal,
 	Children,
 	useLayoutEffect,
@@ -35,21 +34,28 @@ export const Menu = ( {
 	position = 'bottom right',
 	scrollIntoViewOnOpen = false,
 }: MenuProps ) => {
-	const [ boundingRect, setBoundingRect ] = useState< DOMRect >();
 	const selectControlMenuRef = useRef< HTMLDivElement >( null );
+	const popoverRef = useRef< HTMLDivElement >( null );
 
 	useLayoutEffect( () => {
-		if (
+		const comboboxWrapper = selectControlMenuRef.current?.closest(
-			selectControlMenuRef.current?.parentElement &&
+			'.woocommerce-experimental-select-control__combo-box-wrapper'
-			selectControlMenuRef.current?.parentElement.clientWidth > 0
-		) {
-			setBoundingRect(
-				selectControlMenuRef.current.parentElement.getBoundingClientRect()
 		);
+		const popoverContent =
+			popoverRef.current?.querySelector< HTMLDivElement >(
+				'.components-popover__content'
+			);
+		if ( comboboxWrapper && comboboxWrapper?.clientWidth > 0 ) {
+			if ( popoverContent ) {
+				popoverContent.style.width = `${
+					comboboxWrapper.getBoundingClientRect().width
+				}px`;
+			}
 		}
 	}, [
 		selectControlMenuRef.current,
 		selectControlMenuRef.current?.clientWidth,
+		popoverRef.current,
 	] );
 
 	// Scroll the selected item into view when the menu opens.
@@ -80,6 +86,8 @@ export const Menu = ( {
 					) }
 					position={ position }
 					animate={ false }
+					resize={ false }
+					ref={ popoverRef }
 				>
 					<ul
 						{ ...getMenuProps() }
@@ -87,9 +95,6 @@ export const Menu = ( {
 							'woocommerce-experimental-select-control__popover-menu-container',
 							className
 						) }
-						style={ {
-							width: boundingRect?.width,
-						} }
 						onMouseUp={ ( e ) =>
 							// Fix to prevent select control dropdown from closing when selecting within the Popover.
 							e.stopPropagation()

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

@@ -105,6 +105,7 @@ export const SelectTreeMenu = ( {
 					) }
 					position={ position }
 					flip={ false }
+					resize={ false }
 					animate={ false }
 					onFocusOutside={ ( event ) => {
 						if ( isEventOutside( event ) ) {

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

@@ -1,16 +1,28 @@
 .woocommerce-experimental-select-control__combo-box-wrapper {
 	&:focus {
-		box-shadow: 0 0 0 1px var( --wp-admin-theme-color );
+		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-		border-color: var( --wp-admin-theme-color );
+		border-color: var(--wp-admin-theme-color);
 	}
 }
 
 .woocommerce-experimental-select-tree-control__dropdown {
 	display: block;
+
+	.experimental-woocommerce-tree.experimental-woocommerce-tree--level-1 {
+		border-top: none;
+		border-right: none;
+		border-left: none;
+		border-radius: 0;
+	}
+
+	.experimental-woocommerce-tree-item__label {
+		margin-bottom: 0;
+	}
 }
 
 // That's the only way I could remove the padding from the @wordpress/components Dropdown.
-.woocommerce-experimental-select-tree-control__dropdown-content .components-popover__content {
+.woocommerce-experimental-select-tree-control__dropdown-content
+	.components-popover__content {
 	padding: 0;
 }
 

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

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix attributes dropdown jumping when focusing on add new attribute modal shown

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

@@ -8,8 +8,11 @@ import {
 	CheckboxControl,
 	TextControl,
 } from '@wordpress/components';
-import { useState, createElement } from '@wordpress/element';
+import { useState, createElement, Fragment } from '@wordpress/element';
-import { __experimentalTooltip as Tooltip } from '@woocommerce/components';
+import {
+	__experimentalTooltip as Tooltip,
+	__experimentalSelectControlMenuSlot as SelectControlMenuSlot,
+} from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -82,6 +85,7 @@ export const EditAttributeModal: React.FC< EditAttributeModalProps > = ( {
 	const isCustomAttribute = editableAttribute?.id === 0;
 
 	return (
+		<>
 			<Modal
 				title={ title }
 				onRequestClose={ () => onCancel() }
@@ -92,7 +96,9 @@ export const EditAttributeModal: React.FC< EditAttributeModalProps > = ( {
 						label={ nameLabel }
 						disabled={ ! isCustomAttribute }
 						value={
-						editableAttribute?.name ? editableAttribute?.name : ''
+							editableAttribute?.name
+								? editableAttribute?.name
+								: ''
 						}
 						onChange={ ( val ) =>
 							setEditableAttribute( {
@@ -192,12 +198,16 @@ export const EditAttributeModal: React.FC< EditAttributeModalProps > = ( {
 						isPrimary
 						label={ updateAccessibleLabel }
 						onClick={ () => {
-						onEdit( editableAttribute as EnhancedProductAttribute );
+							onEdit(
+								editableAttribute as EnhancedProductAttribute
+							);
 						} }
 					>
 						{ updateLabel }
 					</Button>
 				</div>
 			</Modal>
+			<SelectControlMenuSlot />
+		</>
 	);
 };

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

@@ -220,8 +220,11 @@ export const NewAttributeModal: React.FC< NewAttributeModalProps > = ( {
 			document.querySelector< HTMLLabelElement >(
 				'.woocommerce-new-attribute-modal__table-row .woocommerce-attribute-input-field label'
 			);
-
+		const timeoutId = setTimeout( () => {
 			firstAttributeFieldLabel?.focus();
+		}, 100 );
+
+		return () => clearTimeout( timeoutId );
 	}, [] );
 
 	return (