fix: cover arrow up as well

Author: dobrinyonkov

packages/fiori/cypress/specs/Search.cy.tsx

@@ -88,7 +88,7 @@ describe("Properties", () => {
 			.should("be.focused");
 	});
 
-	it("items slot arrow down navigation with groups and headerText", () => {
+	it("items slot arrow navigation with groups and headerText", () => {
 		cy.mount(
 			<Search>
 				<SearchItemGroup headerText="Group Header 1">
@@ -114,7 +114,7 @@ describe("Properties", () => {
 
 		cy.get("ui5-search-item-group")
 			.shadow()
-			.find("ui5-li-group-header")
+			.find("[ui5-li-group-header]")
 			.should("be.focused");
 
 		cy.get("[ui5-search]")
@@ -124,7 +124,7 @@ describe("Properties", () => {
 			.should("be.focused");
 	});
 
-	it.only("items slot arrow down navigation with groups and no headerText", () => {
+	it("items slot arrow navigation with groups and no headerText", () => {
 		cy.mount(
 			<Search>
 				<SearchItemGroup>

packages/fiori/src/Search.ts

@@ -336,7 +336,7 @@ class Search extends SearchField {
 		return StartsWithPerTerm(str, this._flattenItems.filter(item => !this._isGroupItem(item)), "text");
 	}
 
-	_isGroupItem(item: ISearchSuggestionItem) {
+	_isGroupItem(item: HTMLElement): item is SearchItemGroup {
 		return item.hasAttribute("ui5-search-item-group");
 	}
 
@@ -354,7 +354,8 @@ class Search extends SearchField {
 	}
 
 	_handleArrowDown() {
-		const firstListItem = this._getItemsList()?.listItems?.[0];
+		const focusableItems = this._getItemsList().listItems;
+		const firstListItem = focusableItems.at(0);
 
 		if (this.open) {
 			this._deselectItems();
@@ -449,8 +450,11 @@ class Search extends SearchField {
 	}
 
 	_onItemKeydown(e: KeyboardEvent) {
-		const isFirstItem = this._flattenItems[0] === e.target;
-		const isLastItem = this._flattenItems[this._flattenItems.length - 1] === e.target;
+		const target = e.target as HTMLElement;
+		const focusedItem = this._isGroupItem(target) ? target?.getFocusDomRef() : target;
+		const focusableItems = this._getItemsList().listItems;
+		const isFirstItem = focusableItems.at(0) === focusedItem;
+		const isLastItem = focusableItems.at(-1) === focusedItem;
 		const isArrowUp = isUp(e);
 		const isArrowDown = isDown(e);
 		const isTab = isTabNext(e);
@@ -602,7 +606,7 @@ class Search extends SearchField {
 
 	get _flattenItems(): Array<ISearchSuggestionItem> {
 		return this.getSlottedNodes<ISearchSuggestionItem>("items").flatMap(item => {
-			return this._isGroupItem(item) ? [item, ...item.items!] : [item];
+			return this._isGroupItem(item) ? [item, ...item.items] : [item];
 		});
 	}
 

packages/main/src/ListItemGroup.ts

@@ -234,7 +234,7 @@ class ListItemGroup extends UI5Element {
 	}
 
 	getFocusDomRef() {
-		return this.groupHeaderItem || this.items[0];
+		return this.groupHeaderItem || this.items.at(0);
 	}
 }