fix(dropdown-list): element iterators should operate on the displayItems

Author: cal-smith

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

@@ -7,7 +7,9 @@ import {
 	TemplateRef,
 	AfterViewInit,
 	ViewChild,
-	ElementRef
+	ElementRef,
+	ViewChildren,
+	QueryList
 } from "@angular/core";
 
 import { I18n } from "../../i18n/i18n.module";
@@ -51,7 +53,9 @@ import { Observable, isObservable, Subscription } from "rxjs";
 			role="listbox"
 			class="bx--list-box__menu"
 			[attr.aria-label]="ariaLabel">
-			<li tabindex="-1"
+			<li
+				#listItem
+				tabindex="-1"
 				role="option"
 				*ngFor="let item of displayItems; let i = index"
 				(click)="doClick($event, item)"
@@ -116,6 +120,14 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 * Event to emit selection of a list item within the `DropdownList`.
 	 */
 	@Output() select: EventEmitter<Object> = new EventEmitter<Object>();
+	/**
+	 * Event to suggest a blur on the view.
+	 * Emits _after_ the first/last item has been focussed
+	 * ex.
+	 * ArrowUp -> focus first item
+	 * ArrowUp -> emit event
+	 */
+	@Output() blur = new EventEmitter<"top" | "bottom">();
 	/**
 	 * Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.
 	 */
@@ -146,7 +158,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	/**
 	 * An array holding the HTML list elements in the view.
 	 */
-	protected listElementList: HTMLElement[];
+	@ViewChildren("listItem") protected listElementList: QueryList<ElementRef>;
 	/**
 	 * Observable bound to keydown events to control filtering.
 	 */
@@ -174,7 +186,6 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 * Additionally, any Observables for the `DropdownList` are initialized.
 	 */
 	ngAfterViewInit() {
-		this.listElementList = Array.from(this.list.nativeElement.querySelectorAll("li")) as HTMLElement[];
 		this.index = this.getListItems().findIndex(item => item.selected);
 		this.setupFocusObservable();
 	}
@@ -194,9 +205,6 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	updateList(items) {
 		this._items = items.map(item => Object.assign({}, item));
 		this.displayItems = this._items;
-		setTimeout(() => {
-			this.listElementList = Array.from(this.list.nativeElement.querySelectorAll("li")) as HTMLElement[];
-		}, 0);
 		this.index = this._items.findIndex(item => item.selected);
 		this.setupFocusObservable();
 		setTimeout(() => {
@@ -217,6 +225,8 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 		} else {
 			this.displayItems = this.getListItems();
 		}
+		// reset the index since the list has changed visually
+		this.index = 0;
 	}
 
 	/**
@@ -238,18 +248,18 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.
 	 */
 	getNextItem(): ListItem {
-		if (this.index < this.getListItems().length - 1) {
+		if (this.index < this.displayItems.length - 1) {
 			this.index++;
 		}
-		return this.getListItems()[this.index];
+		return this.displayItems[this.index];
 	}
 
 	/**
 	 * Returns `true` if the selected item is not the last item in the `DropdownList`.
 	 * TODO: standardize
 	 */
 	hasNextElement(): boolean {
-		if (this.index < this.getListItems().length - 1) {
+		if (this.index < this.displayItems.length - 1) {
 			return true;
 		}
 		return false;
@@ -259,11 +269,11 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 * Returns the `HTMLElement` for the item that is subsequent to the selected item.
 	 */
 	getNextElement(): HTMLElement {
-		if (this.index < this.getListItems().length - 1) {
+		if (this.index < this.displayItems.length - 1) {
 			this.index++;
 		}
-		let elem = this.listElementList[this.index];
-		let item = this.getListItems()[this.index];
+		let elem = this.listElementList.toArray()[this.index].nativeElement;
+		let item = this.displayItems[this.index];
 		if (item.disabled) {
 			return this.getNextElement();
 		}
@@ -277,7 +287,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 		if (this.index > 0) {
 			this.index--;
 		}
-		return this.getListItems()[this.index];
+		return this.displayItems[this.index];
 	}
 
 	/**
@@ -298,8 +308,8 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 		if (this.index > 0) {
 			this.index--;
 		}
-		let elem = this.listElementList[this.index];
-		let item = this.getListItems()[this.index];
+		let elem = this.listElementList.toArray()[this.index].nativeElement;
+		let item = this.displayItems[this.index];
 		if (item.disabled) {
 			return this.getPrevElement();
 		}
@@ -311,19 +321,19 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 */
 	getCurrentItem(): ListItem {
 		if (this.index < 0) {
-			return this.getListItems()[0];
+			return this.displayItems[0];
 		}
-		return this.getListItems()[this.index];
+		return this.displayItems[this.index];
 	}
 
 	/**
 	 * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.
 	 */
 	getCurrentElement(): HTMLElement {
 		if (this.index < 0) {
-			return this.listElementList[0];
+			return this.listElementList.first.nativeElement;
 		}
-		return this.listElementList[this.index];
+		return this.listElementList.toArray()[this.index].nativeElement;
 	}
 
 	/**
@@ -374,6 +384,10 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 * Initializes focus in the list, effectively a wrapper for `getCurrentElement().focus()`
 	 */
 	initFocus() {
+		// ensure we start at this first item if nothing is already selected
+		if (this.index < 0) {
+			this.index = 0;
+		}
 		this.getCurrentElement().focus();
 	}
 
@@ -389,14 +403,17 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 			}
 		} else if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Down" || event.key === "Up") {
 			event.preventDefault();
-			// this.checkScrollArrows();
-			if ((event.key === "ArrowDown" || event.key === "Down") && this.hasNextElement()) {
-				this.getNextElement().focus();
+			if (event.key === "ArrowDown" || event.key === "Down") {
+				if (this.hasNextElement()) {
+					this.getNextElement().focus();
+				} else {
+					this.blur.emit("bottom");
+				}
 			} else if (event.key === "ArrowUp" || event.key === "Up") {
 				if (this.hasPrevElement()) {
 					this.getPrevElement().focus();
-				} else if (this.getSelected()) {
-					this.clearSelected.nativeElement.focus();
+				} else {
+					this.blur.emit("top");
 				}
 			}
 		}
@@ -425,12 +442,14 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	}
 
 	onItemFocus(index) {
-		this.listElementList[index].classList.add("bx--list-box__menu-item--highlighted");
-		this.listElementList[index].tabIndex = 0;
+		const element = this.listElementList.toArray()[index].nativeElement;
+		element.classList.add("bx--list-box__menu-item--highlighted");
+		element.tabIndex = 0;
 	}
 
 	onItemBlur(index) {
-		this.listElementList[index].classList.remove("bx--list-box__menu-item--highlighted");
-		this.listElementList[index].tabIndex = -1;
+		const element = this.listElementList.toArray()[index].nativeElement;
+		element.classList.remove("bx--list-box__menu-item--highlighted");
+		element.tabIndex = -1;
 	}
 }