fix(ibm-combo-box): open dropdown when new items are received that match search string

- removed setTimeout from updateList method inside the dropdown list component which
was delaying the execution of the closeDropdown method inside the combo box component
until after the openDropdown method was called
- updated combo box component to filter dropdown list items by the current search string
when new items are passed into the combo box component
- updated dropdown component to run code inside the Angular zone to force a change
detection cycle to take place rather than calling tick method on the application
reference as the tick call was throwing an error after the change to the dropdown list
was introduced

Fix #2426

Author: SMassola

src/combobox/combobox.component.spec.ts

@@ -160,4 +160,28 @@ describe("Combo box", () => {
 		element = fixture.debugElement.query(By.css("input"));
 		expect(element.nativeElement.getAttribute("placeholder")).toBe("placeholder");
 	});
+
+	it("should display dropdown list when new items are passed that match the current search string", () => {
+		fixture = TestBed.createComponent(ComboboxTest);
+		wrapper = fixture.componentInstance;
+		fixture.detectChanges();
+
+		element = fixture.debugElement.query(By.css("ibm-combo-box"));
+
+		const textInput = element.nativeElement.querySelector(".bx--text-input");
+		textInput.value = "f";
+		textInput.dispatchEvent(new Event("input"));
+
+		wrapper.items = [
+			{content: "four", selected: false},
+			{content: "five", selected: false},
+			{content: "six", selected: false}
+		];
+
+		fixture.detectChanges();
+
+		const itemEls = fixture.debugElement.queryAll(By.css(".bx--list-box__menu-item"));
+
+		expect(itemEls.length).toEqual(2);
+	});
 });

src/combobox/combobox.component.ts

@@ -747,7 +747,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 			if (!matches) {
 				const selected = this.view.getSelected();
 				if (!selected || !selected[0]) {
-					this.view.filterBy("");
+					this.view.filterBy(searchString);
 				}
 			}
 		}

src/dropdown/dropdown.component.ts

@@ -12,8 +12,8 @@ import {
 	OnDestroy,
 	HostBinding,
 	TemplateRef,
-	ApplicationRef,
-	AfterViewInit
+	AfterViewInit,
+	NgZone
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 
@@ -357,7 +357,7 @@ export class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDest
 		protected elementRef: ElementRef,
 		protected i18n: I18n,
 		protected dropdownService: DropdownService,
-		protected appRef: ApplicationRef,
+		protected ngZone: NgZone,
 		protected elementService: ElementService) {}
 
 	/**
@@ -387,36 +387,36 @@ export class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDest
 		const isUpdate = event => event && event.isUpdate;
 
 		this.view.select.subscribe(event => {
-			if (this.type === "single" && !isUpdate(event)) {
-				this.closeMenu();
-				if (event.item && event.item.selected) {
-					if (this.itemValueKey) {
-						this.propagateChange(event.item[this.itemValueKey]);
+			this.ngZone.run(() => {
+				if (this.type === "single" && !isUpdate(event)) {
+					this.closeMenu();
+					if (event.item && event.item.selected) {
+						if (this.itemValueKey) {
+							this.propagateChange(event.item[this.itemValueKey]);
+						} else {
+							this.propagateChange(event.item);
+						}
 					} else {
-						this.propagateChange(event.item);
+						this.propagateChange(null);
 					}
-				} else {
-					this.propagateChange(null);
 				}
-			}
 
-			if (this.type === "multi" && !isUpdate(event)) {
-				// if we have a `value` selector and selected items map them appropriately
-				if (this.itemValueKey && this.view.getSelected()) {
-					const values = this.view.getSelected().map(item => item[this.itemValueKey]);
-					this.propagateChange(values);
-				// otherwise just pass up the values from `getSelected`
-				} else {
-					this.propagateChange(this.view.getSelected());
+				if (this.type === "multi" && !isUpdate(event)) {
+					// if we have a `value` selector and selected items map them appropriately
+					if (this.itemValueKey && this.view.getSelected()) {
+						const values = this.view.getSelected().map(item => item[this.itemValueKey]);
+						this.propagateChange(values);
+					// otherwise just pass up the values from `getSelected`
+					} else {
+						this.propagateChange(this.view.getSelected());
+					}
 				}
-			}
-			// only emit selected for "organic" selections
-			if (!isUpdate(event)) {
-				this.checkForReorder();
-				this.selected.emit(event);
-			}
-			// manually tick the app so the view picks up any changes
-			this.appRef.tick();
+				// only emit selected for "organic" selections
+				if (!isUpdate(event)) {
+					this.checkForReorder();
+					this.selected.emit(event);
+				}
+			});
 		});
 	}
 

src/dropdown/list/dropdown-list.component.ts

@@ -276,9 +276,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 		this.displayItems = this._items;
 		this.updateIndex();
 		this.setupFocusObservable();
-		setTimeout(() => {
-			this.doEmitSelect();
-		});
+		this.doEmitSelect();
 	}
 
 	/**