Merge pull request #2524 from Akshat55/combobox-recursion

fix: Prevent too much recursion bug

Author: zvonimirfras

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

@@ -121,7 +121,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	/**
 	 * The list items belonging to the `DropdownList`.
 	 */
-	@Input() set items (value: Array<ListItem> | Observable<Array<ListItem>>) {
+	@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) {
 		if (isObservable(value)) {
 			if (this._itemsSubscription) {
 				this._itemsSubscription.unsubscribe();
@@ -286,6 +286,11 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	filterBy(query = "") {
 		if (query) {
 			this.displayItems = this.getListItems().filter(item => item.content.toLowerCase().includes(query.toLowerCase()));
+			// Reset index if items were found
+			// Prevent selecting index in list that are undefined.
+			if (this.displayItems) {
+				this.index = 0;
+			}
 		} else {
 			this.displayItems = this.getListItems();
 		}
@@ -331,23 +336,26 @@ 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.displayItems.length - 1) {
-			this.index++;
-		}
-		let item = this.displayItems[this.index];
-		if (item.disabled) {
-			return this.getNextElement();
+		// Only return native elements if they are rendered
+		const elemList = this.listElementList ? this.listElementList.toArray() : [];
+		if (!elemList.length) {
+			return null;
 		}
 
-		let elemList = this.listElementList ? this.listElementList.toArray() : [];
-
-		// TODO: update to optional chaining after upgrading typescript
-		// to v3.7+
-		if (elemList[this.index] && elemList[this.index].nativeElement) {
-			return elemList[this.index].nativeElement;
-		} else {
-			return null;
+		/**
+		 * Start checking from next index
+		 * Continue looping through the list until a non disabeled element is found or
+		 * end of list is reached
+		 */
+		for (let i = this.index + 1; i < elemList.length; i++) {
+			// If the values in the list are not disabled
+			if (!this.displayItems[i].disabled) {
+				this.index = i;
+				return elemList[i].nativeElement;
+			}
 		}
+
+		return elemList[this.index].nativeElement;
 	}
 
 	/**
@@ -371,23 +379,26 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 * Returns the `HTMLElement` for the item that precedes the selected item.
 	 */
 	getPrevElement(): HTMLElement {
-		if (this.index > 0) {
-			this.index--;
-		}
-		let item = this.displayItems[this.index];
-		if (item.disabled) {
-			return this.getPrevElement();
+		// Only return native elements if they are rendered
+		const elemList = this.listElementList ? this.listElementList.toArray() : [];
+		if (!elemList.length) {
+			return null;
 		}
 
-		let elemList = this.listElementList ? this.listElementList.toArray() : [];
-
-		// TODO: update to optional chaining after upgrading typescript
-		// to v3.7+
-		if (elemList[this.index] && elemList[this.index].nativeElement) {
-			return elemList[this.index].nativeElement;
-		} else {
-			return null;
+		/**
+		 * Start checking from next index
+		 * Continue looping through the list until a non disabeled element is found or
+		 * end of list is reached
+		 */
+		for (let i = this.index - 1; i < this.index && i >= 0; i--) {
+			// If the values in the list are not disabled
+			if (!this.displayItems[i].disabled) {
+				this.index = i;
+				return elemList[i].nativeElement;
+			}
 		}
+
+		return elemList[this.index].nativeElement;
 	}
 
 	/**
@@ -497,12 +508,12 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	doKeyDown(event: KeyboardEvent, item: ListItem) {
 		// "Spacebar", "Down", and "Up" are IE specific values
 		if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
-				if (this.listElementList.some(option => option.nativeElement === event.target)) {
-					event.preventDefault();
-				}
-				if (event.key === "Enter") {
-					this.doClick(event, item);
-				}
+			if (this.listElementList.some(option => option.nativeElement === event.target)) {
+				event.preventDefault();
+			}
+			if (event.key === "Enter") {
+				this.doClick(event, item);
+			}
 		} else if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Down" || event.key === "Up") {
 			event.preventDefault();
 			if (event.key === "ArrowDown" || event.key === "Down") {
@@ -539,7 +550,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 			event.preventDefault();
 			if (event.key === "ArrowDown" || event.key === "Down") {
 				if (this.hasNextElement()) {
-					this.getNextElement().scrollIntoView({block: "end"});
+					this.getNextElement().scrollIntoView({ block: "end" });
 				} else {
 					this.blurIntent.emit("bottom");
 				}
@@ -561,7 +572,7 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 	 */
 	doClick(event, item) {
 		event.preventDefault();
-		if (!item.disabled) {
+		if (item && !item.disabled) {
 			this.list.nativeElement.focus();
 			if (this.type === "single") {
 				item.selected = true;