fix: prevent dropdown from closing when querying (#3183)

Signed-off-by: Akshat Patel <[email protected]>

Author: Akshat55

src/combobox/combobox.component.ts

@@ -546,8 +546,8 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 						this.elementRef.nativeElement.querySelector("input").focus();
 						this.view.filterBy("");
 						this.selected.emit(event.item);
+						this.closeDropdown();
 					}
-					this.closeDropdown();
 				}
 			});
 			// update the rest of combobox with any pre-selected items
@@ -691,8 +691,14 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 		});
 		this.view.items = this.items;
 		this.updatePills();
-		// clearSelected can only fire on type=multi
-		// so we just emit getSelected() (just in case there's any disabled but selected items)
+		/**
+		 * @todo - In next major version update to the following:
+		 * const selected = this.type === "multi" ? this.view.getSelected() : undefined;
+		 *
+		 * Previously it returned an empty array even for type === 'single'
+		 * Also resolve #ref-1245723
+		 */
+		// On type=multi we just emit getSelected() (just in case there's any disabled but selected items)
 		const selected = this.view.getSelected();
 
 		// in case there are disabled items they should be mapped according to itemValueKey

src/combobox/stories/app-mock-query-search.component.ts

@@ -6,23 +6,43 @@ import { Component } from "@angular/core";
 		<cds-combo-box
 			appendInline="true"
 			[items]="filterItems"
-			(search)="onSearch($event)">
+			(search)="onSearch($event)"
+			(selected)="selected($event)">
 			<cds-dropdown-list></cds-dropdown-list>
 		</cds-combo-box>
 	`
 })
 export class MockQueryCombobox {
 	filterItems: any = [];
+	currentlySelected: any;
 
 	onSearch() {
 		// Call API or search through items list
 		setTimeout(() => {
-			this.filterItems = [
+			const array = [
+				{ content: `Random ${Math.random()}` },
 				{ content: `Random ${Math.random()}` },
 				{ content: `Random ${Math.random()}` },
 				{ content: `Random ${Math.random()}` },
-				{ content: `Random ${Math.random()}` }
 			];
+
+			// Include current selected in the list to avoid auto clear
+			if (this.currentlySelected) {
+				array.push(this.currentlySelected)
+			}
+			this.filterItems = array;
 		}, 1000);
 	}
+
+	selected(event: any) {
+		/**
+		 * #ref-1245723
+		 * Update this on major release
+		 */
+		if (Array.isArray(event) && !event.length) {
+			this.currentlySelected = undefined;
+		} else {
+			this.currentlySelected = event;
+		}
+	}
 }