Merge pull request #416 from cal-smith/dropdown

zvonimirfras · web-flow · commit ea5db26bbdc7 · 2019-03-06T08:29:08.000-05:00
Dropdown enhancements
diff --git a/src/combobox/combobox.component.ts b/src/combobox/combobox.component.ts
@@ -16,6 +16,7 @@ import {
 import { AbstractDropdownView } from "./../dropdown/abstract-dropdown-view.class";
 import { ListItem } from "./../dropdown/list-item.interface";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { filter } from "rxjs/operators";
 
 /**
  * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.
@@ -262,6 +263,10 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 			setTimeout(() => {
 				this.updateSelected();
 			});
+
+			this.view.blurIntent.pipe(filter(v => v === "top")).subscribe(() => {
+				this.elementRef.nativeElement.querySelector(".bx--text-input").focus();
+			});
 		}
 	}
 
@@ -291,10 +296,6 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 			ev.stopPropagation();
 			this.openDropdown();
 			setTimeout(() => this.view.getCurrentElement().focus(), 0);
-		} else if ((ev.key === "ArrowUp" || ev.key === "Up") // `"Up"` is IE specific value
-			&& this.dropdownMenu.nativeElement.contains(ev.target)
-			&& !this.view.hasPrevElement()) {
-			this.elementRef.nativeElement.querySelector(".bx--text-input").focus();
 		}
 	}
 
diff --git a/src/dropdown/abstract-dropdown-view.class.ts b/src/dropdown/abstract-dropdown-view.class.ts
@@ -19,6 +19,17 @@ export class AbstractDropdownView {
 	 * Emits selection events to other class.
 	 */
 	@Output() select: EventEmitter<Object>;
+	/**
+	 * Event to suggest a blur on the view.
+	 * Emits _after_ the first/last item has been focused.
+	 * ex.
+	 * ArrowUp -> focus first item
+	 * ArrowUp -> emit event
+	 *
+	 * It's recommended that the implementing view include a specific type union of possible blurs
+	 * ex. `@Output() blurIntent = new EventEmitter<"top" | "bottom">();`
+	 */
+	@Output() blurIntent: EventEmitter<any>;
 	/**
 	 * Specifies whether or not the `DropdownList` supports selecting multiple items as opposed to single
 	 * item selection.
diff --git a/src/dropdown/list/dropdown-list.component.ts b/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)"
@@ -118,6 +122,16 @@ 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 focused.
+	 * ex.
+	 * ArrowUp -> focus first item
+	 * ArrowUp -> emit event
+	 *
+	 * When this event fires focus should be placed on some element outside of the list - blurring the list as a result
+	 */
+	@Output() blurIntent = new EventEmitter<"top" | "bottom">();
 	/**
 	 * Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.
 	 */
@@ -148,7 +162,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.
 	 */
@@ -176,7 +190,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();
 	}
@@ -196,9 +209,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(() => {
@@ -219,6 +229,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;
 	}
 
 	/**
@@ -240,18 +252,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;
@@ -261,11 +273,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();
 		}
@@ -279,7 +291,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 		if (this.index > 0) {
 			this.index--;
 		}
-		return this.getListItems()[this.index];
+		return this.displayItems[this.index];
 	}
 
 	/**
@@ -300,8 +312,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();
 		}
@@ -313,19 +325,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;
 	}
 
 	/**
@@ -376,6 +388,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();
 	}
 
@@ -391,14 +407,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.blurIntent.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.blurIntent.emit("top");
 				}
 			}
 		}
@@ -427,12 +446,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;
 	}
 }
