feat(ui5-combobox): introduce nested grouping of items

packages/main/src/ComboBox.ts

@@ -77,7 +77,8 @@ import type { ListItemClickEventDetail } from "./List.js";
 import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
 import StandardListItem from "./StandardListItem.js";
-import ComboBoxGroupItem from "./ComboBoxGroupItem.js";
+import ComboBoxItemGroup, { isInstanceOfComboBoxItemGroup } from "./ComboBoxItemGroup.js";
+import ListItemGroup from "./ListItemGroup.js";
 import ListItemGroupHeader from "./ListItemGroupHeader.js";
 import ComboBoxFilter from "./types/ComboBoxFilter.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
@@ -97,6 +98,8 @@ interface IComboBoxItem extends UI5Element {
 	selected?: boolean,
 	additionalText?: string,
 	stableDomRef: string,
+	_isVisible?: boolean,
+	items?: Array<IComboBoxItem>
 }
 
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
@@ -176,9 +179,10 @@ type ComboBoxSelectionChangeEventDetail = {
 		BusyIndicator,
 		Button,
 		StandardListItem,
+		ListItemGroup,
 		ListItemGroupHeader,
 		Popover,
-		ComboBoxGroupItem,
+		ComboBoxItemGroup,
 		Input,
 		SuggestionItem,
 	],
@@ -452,8 +456,15 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		if (this.open && !this._isKeyNavigation) {
 			const items = this._filterItems(this.filterValue);
+			this._filteredItems = (items.length && items) || [];
+		}
+
+		const hasNoVisibleItems = !this._filteredItems.length || !this._filteredItems.some(i => i._isVisible);
 
-			this._filteredItems = items.length ? items : this.items;
+		// If there is no filtered items matching the value, show all items when the arrow is pressed
+		if (((hasNoVisibleItems && !isPhone()) && this.value)) {
+			this.items.forEach(this._makeAllVisible.bind(this));
+			this._filteredItems = this.items;
 		}
 
 		if (!this._initialRendering && document.activeElement === this && !this._filteredItems.length && popover) {
@@ -613,6 +624,19 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		this._selectMatchingItem();
 	}
 
+	_resetItemVisibility() {
+		this.items.forEach(item => {
+			if (isInstanceOfComboBoxItemGroup(item)) {
+				item.items?.forEach(i => {
+					i._isVisible = false;
+				});
+				return;
+			}
+
+			item._isVisible = false;
+		});
+	}
+
 	_arrowClick() {
 		this.inner.focus();
 		this._resetFilter();
@@ -656,7 +680,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 			if (value !== "" && (item && !item.selected && !item.isGroupItem)) {
 				this.fireEvent<ComboBoxSelectionChangeEventDetail>("selection-change", {
-					item,
+					item: item as ComboBoxItem,
 				});
 			}
 		}
@@ -695,36 +719,67 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_startsWithMatchingItems(str: string): Array<IComboBoxItem> {
-		return Filters.StartsWith(str, this._filteredItems, "text");
+		const filteredItems: Array<IComboBoxItem> = [];
+
+		this._filteredItems.forEach(item => {
+			if (isInstanceOfComboBoxItemGroup(item)) {
+				filteredItems.push(...item.items);
+				return;
+			}
+
+			filteredItems.push(item);
+		});
+
+		return Filters.StartsWith(str, filteredItems, "text");
 	}
 
 	_clearFocus() {
-		this._filteredItems.map(item => {
+		const allItems = this._getItems();
+
+		allItems.map(item => {
 			item.focused = false;
 
 			return item;
 		});
 	}
 
+	// Get groups and items as a flat array for filtering
+	_getItems() {
+		const allItems: Array<IComboBoxItem> = [];
+
+		this._filteredItems.forEach(item => {
+			if (isInstanceOfComboBoxItemGroup(item)) {
+				const groupedItems = [item, ...item.items];
+				allItems.push(...groupedItems);
+				return;
+			}
+
+			allItems.push(item);
+		});
+
+		return allItems;
+	}
+
 	handleNavKeyPress(e: KeyboardEvent) {
+		const allItems = this._getItems();
+
 		if (this.focused && (isHome(e) || isEnd(e)) && this.value) {
 			return;
 		}
 
 		const isOpen = this.open;
-		const currentItem = this._filteredItems.find(item => {
+		const currentItem = allItems.find(item => {
 			return isOpen ? item.focused : item.selected;
 		});
 
-		const indexOfItem = currentItem ? this._filteredItems.indexOf(currentItem) : -1;
-
+		const indexOfItem = currentItem ? allItems.indexOf(currentItem) : -1;
 		e.preventDefault();
 
 		if (this.focused && isOpen && (isUp(e) || isPageUp(e) || isPageDown(e))) {
 			return;
 		}
 
-		if (this._filteredItems.length - 1 === indexOfItem && isDown(e)) {
+		if (allItems.length - 1 === indexOfItem && isDown(e)) {
 			return;
 		}
 
@@ -743,10 +798,12 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_handleItemNavigation(e: KeyboardEvent, indexOfItem: number, isForward: boolean) {
+		const allItems = this._getItems();
+
 		const isOpen = this.open;
-		const currentItem = this._filteredItems[indexOfItem];
-		const nextItem = isForward ? this._filteredItems[indexOfItem + 1] : this._filteredItems[indexOfItem - 1];
+		const currentItem: IComboBoxItem = allItems[indexOfItem];
 		const isGroupItem = currentItem && currentItem.isGroupItem;
+		const nextItem = isForward ? allItems[indexOfItem + 1] : allItems[indexOfItem - 1];
 
 		if ((!isOpen) && ((isGroupItem && !nextItem) || (!isGroupItem && !currentItem))) {
 			return;
@@ -758,10 +815,11 @@ class ComboBox extends UI5Element implements IFormInputElement {
 			this._itemFocused = true;
 			this.value = isGroupItem ? "" : currentItem.text;
 			this.focused = false;
+
 			currentItem.focused = true;
 		} else {
 			this.focused = true;
-			this.value = isGroupItem ? nextItem.text : currentItem.text;
+			this.value = isGroupItem ? "" : currentItem.text;
 			currentItem.focused = false;
 		}
 
@@ -773,14 +831,13 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		if (isGroupItem && isOpen) {
 			return;
 		}
-
 		// autocomplete
 		const item = this._getFirstMatchingItem(this.value);
 		item && this._applyAtomicValueAndSelection(item, (this.open ? this._userTypedValue : ""), true);
 
 		if ((item && !item.selected)) {
 			this.fireEvent<ComboBoxSelectionChangeEventDetail>("selection-change", {
-				item,
+				item: item as ComboBoxItem,
 			});
 		}
 
@@ -848,11 +905,12 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_handlePageDown(e: KeyboardEvent, indexOfItem: number) {
-		const itemsLength = this._filteredItems.length;
+		const allItems = this._getItems();
+		const itemsLength = allItems.length;
 		const isProposedIndexValid = indexOfItem + SKIP_ITEMS_SIZE < itemsLength;
 
 		indexOfItem = isProposedIndexValid ? indexOfItem + SKIP_ITEMS_SIZE : itemsLength - 1;
-		const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
+		const shouldMoveForward = allItems[indexOfItem].isGroupItem && !this.open;
 
 		this._handleItemNavigation(e, indexOfItem, shouldMoveForward);
 	}
@@ -872,7 +930,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_handleEnd(e: KeyboardEvent) {
-		this._handleItemNavigation(e, this._filteredItems.length - 1, true /* isForward */);
+		this._handleItemNavigation(e, this._getItems().length - 1, true /* isForward */);
 	}
 
 	_keyup() {
@@ -891,8 +949,16 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		}
 
 		if (isEnter(e)) {
-			const focusedItem = this._filteredItems.find(item => {
-				return item.focused;
+			let focusedItem: IComboBoxItem | undefined;
+
+			this._filteredItems.forEach(item => {
+				if (isInstanceOfComboBoxItemGroup(item) && !focusedItem) {
+					focusedItem = item.items.find(groupItem => groupItem.focused);
+				}
+
+				if (item.focused) {
+					focusedItem = item;
+				}
 			});
 
 			this._fireChangeEvent();
@@ -978,46 +1044,53 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_filterItems(str: string) {
-		const itemsToFilter = this.items.filter(item => !item.isGroupItem);
-		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
+		let filteredItem:IComboBoxItem;
+		let filteredGroupItems: Array<IComboBoxItem> = [];
+		const filteredItems: Array<IComboBoxItem> = [];
+		const filteredItemGroups: Array<IComboBoxItem> = [];
 
-		// Return the filtered items and their group items
-		return this.items.filter((item, idx, allItems) => ComboBox._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
-	}
+		this._resetItemVisibility();
+		this.items.forEach(item => {
+			if (isInstanceOfComboBoxItemGroup(item)) {
+				filteredGroupItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, item.items, "text");
+				filteredGroupItems.forEach(i => {
+					i._isVisible = true;
+				});
 
-	/**
-	 * Returns true if the group header should be shown (if there is a filtered suggestion item for this group item)
-	 * @private
-	 */
-	static _groupItemFilter(item: IComboBoxItem, idx: number, allItems: Array<IComboBoxItem>, filteredItems: Array<IComboBoxItem>) {
-		if (item.isGroupItem) {
-			let groupHasFilteredItems;
+				if (filteredGroupItems.length) {
+					filteredItemGroups.push(item);
+				}
 
-			while (allItems[idx] && !allItems[idx].isGroupItem && !groupHasFilteredItems) {
-				groupHasFilteredItems = filteredItems.indexOf(allItems[idx]) !== -1;
-				idx++;
+				return;
 			}
 
-			return groupHasFilteredItems;
-		}
+			[filteredItem] = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, [item], "text");
+
+			if (filteredItem) {
+				filteredItem._isVisible = true;
+				filteredItems.push(filteredItem);
+			}
+		});
+
+		return [...filteredItemGroups, ...filteredItems];
 	}
 
-	_getFirstMatchingItem(current: string): ComboBoxItem | undefined {
+	_getFirstMatchingItem(current: string): IComboBoxItem | void {
 		const currentlyFocusedItem = this.items.find(item => item.focused === true);
 
 		if (currentlyFocusedItem?.isGroupItem) {
 			this.value = this.filterValue;
 			return;
 		}
 
-		const matchingItems: Array<ComboBoxItem> = (this._startsWithMatchingItems(current).filter(item => !item.isGroupItem) as Array<ComboBoxItem>);
+		const matchingItems: Array<IComboBoxItem> = (this._startsWithMatchingItems(current).map(item => (isInstanceOfComboBoxItemGroup(item) && item.items[0]) || item));
 
 		if (matchingItems.length) {
 			return matchingItems[0];
 		}
 	}
 
-	_applyAtomicValueAndSelection(item: ComboBoxItem, filterValue: string, highlightValue: boolean) {
+	_applyAtomicValueAndSelection(item: IComboBoxItem, filterValue: string, highlightValue: boolean) {
 		const value = (item && item.text) || "";
 
 		this.inner.value = value;
@@ -1030,13 +1103,24 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	_selectMatchingItem() {
 		const currentlyFocusedItem = this.items.find(item => item.focused);
 		const shouldSelectionBeCleared = currentlyFocusedItem && currentlyFocusedItem.isGroupItem;
+		let itemToBeSelected: IComboBoxItem | undefined;
 
-		const itemToBeSelected = this._filteredItems.find(item => {
-			return !item.isGroupItem && (item.text === this.value) && !shouldSelectionBeCleared;
+		this._filteredItems.forEach(item => {
+			if (!shouldSelectionBeCleared && !itemToBeSelected) {
+				itemToBeSelected = ((!item.isGroupItem && (item.text === this.value)) ? item : item?.items?.find(i => i.text === this.value));
+			}
 		});
 
 		this._filteredItems = this._filteredItems.map(item => {
-			item.selected = item === itemToBeSelected;
+			if (!isInstanceOfComboBoxItemGroup(item)) {
+				item.selected = item === itemToBeSelected;
+				return item;
+			}
+
+			item.items?.forEach(groupItem => {
+				groupItem.selected = itemToBeSelected === groupItem;
+			});
+
 			return item;
 		});
 	}
@@ -1095,9 +1179,10 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_announceSelectedItem(indexOfItem: number) {
-		const currentItem = this._filteredItems[indexOfItem];
-		const nonGroupItems = this._filteredItems.filter(item => !item.isGroupItem);
-		const currentItemAdditionalText = currentItem.additionalText || "";
+		const allItems = this._getItems();
+		const currentItem = allItems[indexOfItem];
+		const nonGroupItems = allItems.filter(item => !item.isGroupItem);
+		const currentItemAdditionalText = currentItem?.additionalText || "";
 		const isGroupItem = currentItem?.isGroupItem;
 		const itemPositionText = ComboBox.i18nBundle.getText(LIST_ITEM_POSITION, nonGroupItems.indexOf(currentItem) + 1, nonGroupItems.length);
 		const groupHeaderText = ComboBox.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
@@ -1110,7 +1195,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_clear() {
-		const selectedItem = this.items.find(item => item.selected) as (ComboBoxItem | undefined);
+		const selectedItem = this.items.find(item => item.selected);
 
 		if (selectedItem?.text === this.value) {
 			this.fireEvent("change");
@@ -1127,6 +1212,17 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		}
 	}
 
+	_makeAllVisible(item: IComboBoxItem) {
+		if (isInstanceOfComboBoxItemGroup(item)) {
+			item.items.forEach(groupItem => {
+				groupItem._isVisible = true;
+			});
+			return;
+		}
+
+		item._isVisible = true;
+	}
+
 	async _scrollToItem(indexOfItem: number, forward: boolean) {
 		const picker = await this._getPicker();
 		const list = picker.querySelector(".ui5-combobox-items-list") as List;

packages/main/src/ComboBoxItem.ts

@@ -31,6 +31,13 @@ class ComboBoxItem extends UI5Element implements IComboBoxItem {
 	@property()
 	additionalText!: string
 
+	/**
+	 * Indicates whether the item is filtered
+	 * @private
+	 */
+	@property({ type: Boolean, noAttribute: true })
+	_isVisible!: boolean;
+
 	/**
 	 * Indicates whether the item is focssed
 	 * @protected