Merge pull request #2427 from SMassola/issue-2426

fix(ibm-combo-box): show list of new items that match current search

Author: zvonimirfras

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,7 +12,6 @@ import {
 	OnDestroy,
 	HostBinding,
 	TemplateRef,
-	ApplicationRef,
 	AfterViewInit
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
@@ -357,7 +356,6 @@ export class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDest
 		protected elementRef: ElementRef,
 		protected i18n: I18n,
 		protected dropdownService: DropdownService,
-		protected appRef: ApplicationRef,
 		protected elementService: ElementService) {}
 
 	/**
@@ -415,8 +413,6 @@ export class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDest
 				this.checkForReorder();
 				this.selected.emit(event);
 			}
-			// manually tick the app so the view picks up any changes
-			this.appRef.tick();
 		});
 	}
 

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

@@ -9,7 +9,8 @@ import {
 	ViewChild,
 	ElementRef,
 	ViewChildren,
-	QueryList
+	QueryList,
+	ApplicationRef
 } from "@angular/core";
 import { Observable, isObservable, Subscription, of } from "rxjs";
 import { first } from "rxjs/operators";
@@ -226,7 +227,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	/**
 	 * Creates an instance of `DropdownList`.
 	 */
-	constructor(public elementRef: ElementRef, protected i18n: I18n) {}
+	constructor(public elementRef: ElementRef, protected i18n: I18n, protected appRef: ApplicationRef) {}
 
 	/**
 	 * Retrieves array of list items and index of the selected item after view has rendered.
@@ -276,9 +277,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 		this.displayItems = this._items;
 		this.updateIndex();
 		this.setupFocusObservable();
-		setTimeout(() => {
-			this.doEmitSelect();
-		});
+		this.doEmitSelect();
 	}
 
 	/**
@@ -576,6 +575,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 			this.index = this.displayItems.indexOf(item);
 			this.highlightedItem = this.getItemId(this.index);
 			this.doEmitSelect(false);
+			this.appRef.tick();
 		}
 	}