SelectControl: fix display of multiple selections without inline tags. (https://github.com/woocommerce/woocommerce-admin/pull/6862)

* SelectControl: fix display of multiple selections without inline tags.

* Add changelog entries.

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,5 +1,6 @@
 # Unreleased
 
+-   SelectControl: fix display of multiple selections without inline tags. #6862
 -   Add new (experimental) list, and add depreciation notice for the current list. #6787
 -   Force `<SearchListItem>` form elements id to be unique. #6871
 -   Add `controlId` and `name` props to `<SearchListItem>`. #6871

plugins/woocommerce-admin/packages/components/src/select-control/index.js

@@ -50,10 +50,10 @@ export class SelectControl extends Component {
 	}
 
 	reset( selected = this.getSelected() ) {
-		const { inlineTags } = this.props;
+		const { multiple } = this.props;
 		const newState = { ...initialState };
-		// Reset to the option label if not using tags.
-		if ( ! inlineTags && selected.length && selected[ 0 ].label ) {
+		// Reset to the option label if single selection.
+		if ( ! multiple && selected.length && selected[ 0 ].label ) {
 			newState.query = selected[ 0 ].label;
 		}
 
@@ -64,10 +64,10 @@ export class SelectControl extends Component {
 		this.reset();
 	}
 
-	hasTags() {
-		const { inlineTags, selected } = this.props;
+	hasMultiple() {
+		const { multiple, selected } = this.props;
 
-		if ( ! inlineTags ) {
+		if ( ! multiple ) {
 			return false;
 		}
 
@@ -306,7 +306,7 @@ export class SelectControl extends Component {
 		} = this.props;
 		const { isExpanded, isFocused, selectedIndex } = this.state;
 
-		const hasTags = this.hasTags();
+		const hasMultiple = this.hasMultiple();
 		const { key: selectedKey = '' } = options[ selectedIndex ] || {};
 		const listboxId = isExpanded
 			? `woocommerce-select-control__listbox-${ instanceId }`
@@ -321,7 +321,7 @@ export class SelectControl extends Component {
 					'woocommerce-select-control',
 					className,
 					{
-						'has-inline-tags': hasTags && inlineTags,
+						'has-inline-tags': hasMultiple && inlineTags,
 						'is-focused': isFocused,
 						'is-searchable': isSearchable,
 					}
@@ -343,7 +343,7 @@ export class SelectControl extends Component {
 					{ ...this.state }
 					activeId={ activeId }
 					className={ controlClassName }
-					hasTags={ hasTags }
+					hasTags={ hasMultiple }
 					isExpanded={ isExpanded }
 					listboxId={ listboxId }
 					onSearch={ this.search }
@@ -354,7 +354,7 @@ export class SelectControl extends Component {
 					decrementSelectedIndex={ this.decrementSelectedIndex }
 					incrementSelectedIndex={ this.incrementSelectedIndex }
 				/>
-				{ ! inlineTags && hasTags && (
+				{ ! inlineTags && hasMultiple && (
 					<Tags { ...this.props } selected={ this.getSelected() } />
 				) }
 				{ isExpanded && (

plugins/woocommerce-admin/packages/components/src/select-control/test/index.js

@@ -300,4 +300,18 @@ describe( 'SelectControl', () => {
 			} );
 		} );
 	} );
+
+	it( 'displays multiple selection not inline', async () => {
+		const { getByText } = render(
+			<SelectControl
+				isSearchable
+				options={ options }
+				selected={ [ options[ 1 ] ] }
+				multiple
+				inlineTags={ false }
+			/>
+		);
+
+		expect( getByText( options[ 1 ].label ) ).toBeInTheDocument();
+	} );
 } );

plugins/woocommerce-admin/readme.txt

@@ -106,6 +106,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Fix: Parsing bad JSON string data from user WooCommerce meta. #6819
 - Fix: Remove PayPal for India #6828
 - Fix: Report filters expecting specific ordering. #6847
+- Fix: Render bug with report comparison mode selections. #6862
 - Fix: Throw exception if the data store cannot be loaded when trying to use notes. #6771
 - Performance: Avoid updating customer info synchronously from the front end. #6765
 - Tweak: Add settings_section event prop for CES #6762