Commit caf7f438bf8 for woocommerce

commit caf7f438bf811565a5d1f89858330f94b852fcaa
Author: Luigi Teschio <gigitux@gmail.com>
Date:   Mon Aug 17 10:19:25 2026 +0200

    Fix inline tag alignment in single-select controls (#67693)

    * Fix inline tag alignment in single-select controls

    * Add changelog entry for single-select inline tag alignment

diff --git a/packages/js/components/changelog/fix-select-control-inline-tag-alignment b/packages/js/components/changelog/fix-select-control-inline-tag-alignment
new file mode 100644
index 00000000000..55a939338e0
--- /dev/null
+++ b/packages/js/components/changelog/fix-select-control-inline-tag-alignment
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Align inline tags in single-select controls.
diff --git a/packages/js/components/src/select-control/index.tsx b/packages/js/components/src/select-control/index.tsx
index e5ae05753eb..a0996b91d8c 100644
--- a/packages/js/components/src/select-control/index.tsx
+++ b/packages/js/components/src/select-control/index.tsx
@@ -299,6 +299,15 @@ export class SelectControl extends Component< Props, State > {
 		return Boolean( selected );
 	}

+	hasTags() {
+		const selected = this.getSelected();
+
+		return (
+			Array.isArray( selected ) &&
+			selected.some( ( item ) => Boolean( item.label ) )
+		);
+	}
+
 	getSelected(): Selected | undefined {
 		const { multiple, options, selected } = this.props;

@@ -565,6 +574,7 @@ export class SelectControl extends Component< Props, State > {
 		const { isExpanded, isFocused, selectedIndex } = this.state;

 		const hasMultiple = this.hasMultiple();
+		const hasTags = this.hasTags();
 		const { key: selectedKey = '' } =
 			( isNumber( selectedIndex ) && options[ selectedIndex ] ) || {};
 		const listboxId = isExpanded
@@ -577,7 +587,7 @@ export class SelectControl extends Component< Props, State > {
 		return (
 			<div
 				className={ clsx( 'woocommerce-select-control', className, {
-					'has-inline-tags': hasMultiple && inlineTags,
+					'has-inline-tags': hasTags && inlineTags,
 					'is-focused': isFocused,
 					'is-searchable': isSearchable,
 				} ) }
@@ -611,7 +621,7 @@ export class SelectControl extends Component< Props, State > {
 					activeId={ activeId }
 					className={ controlClassName }
 					disabled={ disabled }
-					hasTags={ hasMultiple }
+					hasTags={ hasTags }
 					isExpanded={ isExpanded }
 					listboxId={ listboxId }
 					onSearch={ this.search }
diff --git a/packages/js/components/src/select-control/stories/select-control.story.tsx b/packages/js/components/src/select-control/stories/select-control.story.tsx
index 2b3786fa772..374b3a1602c 100644
--- a/packages/js/components/src/select-control/stories/select-control.story.tsx
+++ b/packages/js/components/src/select-control/stories/select-control.story.tsx
@@ -248,6 +248,23 @@ const SelectControlExample = () => {

 export const Basic = () => <SelectControlExample />;

+export const SingleSelectWithInlineTag = () => {
+	const [ selected, setSelected ] = useState( [ options[ 0 ] ] );
+
+	return (
+		<SelectControl
+			label="Single value with inline tag"
+			isSearchable
+			inlineTags
+			multiple={ false }
+			onChange={ setSelected }
+			options={ options }
+			placeholder="Start typing to filter options..."
+			selected={ selected }
+		/>
+	);
+};
+
 export default {
 	title: 'Components/SelectControl',
 	component: SelectControl,