fix(ui5-shellbar-search): focus on first suggestion item

Author: dobrinyonkov

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

@@ -88,6 +88,76 @@ describe("Properties", () => {
 			.should("be.focused");
 	});
 
+	it("items slot arrow down navigation with groups and headerText", () => {
+		cy.mount(
+			<Search>
+				<SearchItemGroup headerText="Group Header 1">
+					<SearchItem text="List Item" icon={history}></SearchItem>
+					<SearchItem text="List Item" icon={searchIcon}></SearchItem>
+				</SearchItemGroup>
+			</Search>
+		);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.realPress("L");
+
+		cy.get("[ui5-search]")
+			.should("be.focused");
+
+		cy.get("[ui5-search]")
+			.realPress("ArrowDown");
+
+		cy.get("ui5-search-item-group")
+			.shadow()
+			.find("ui5-li-group-header")
+			.should("be.focused");
+
+		cy.get("[ui5-search]")
+			.realPress("ArrowUp");
+
+		cy.get("[ui5-search]")
+			.should("be.focused");
+	});
+
+	it.only("items slot arrow down navigation with groups and no headerText", () => {
+		cy.mount(
+			<Search>
+				<SearchItemGroup>
+					<SearchItem text="List Item" icon={history}></SearchItem>
+					<SearchItem text="List Item" icon={searchIcon}></SearchItem>
+				</SearchItemGroup>
+			</Search>
+		);
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.realPress("L");
+
+		cy.get("[ui5-search]")
+			.should("be.focused");
+
+		cy.get("[ui5-search]")
+			.realPress("ArrowDown");
+
+		cy.get("ui5-search-item").eq(0)
+			.should("be.focused");
+
+		cy.get("[ui5-search]")
+			.realPress("ArrowUp");
+
+		cy.get("[ui5-search]")
+			.should("be.focused");
+	})
+
 	it("items should be shown instead of illustration of both present ", () => {
 		cy.mount(
 			<Search>

packages/fiori/src/Search.ts

@@ -354,7 +354,7 @@ class Search extends SearchField {
 	}
 
 	_handleArrowDown() {
-		const firstListItem = this._getItemsList()?.getSlottedNodes<ISearchSuggestionItem>("items")[0];
+		const firstListItem = this._getItemsList()?.listItems?.[0];
 
 		if (this.open) {
 			this._deselectItems();

packages/fiori/src/SearchItemGroup.ts

@@ -26,10 +26,6 @@ class SearchItemGroup extends ListItemGroup {
 	get isGroupItem(): boolean {
 		return true;
 	}
-
-	getFocusDomRef() {
-		return this.shadowRoot!.querySelector("[ui5-li-group-header]") as ListItemGroupHeader;
-	}
 }
 
 SearchItemGroup.define();

packages/main/src/ListItemGroup.ts

@@ -232,6 +232,10 @@ class ListItemGroup extends UI5Element {
 
 		this.dropIndicatorDOM!.targetReference = null;
 	}
+
+	getFocusDomRef() {
+		return this.groupHeaderItem || this.items[0];
+	}
 }
 
 ListItemGroup.define();