feat(ui5-search-item-show-more): introduce new click event (#12410)

Author: StefanDimitrov04

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

@@ -623,6 +623,64 @@ describe("Events", () => {
 		}));
 	});
 
+	it("click event on show-more-item selection with mouse", () => {
+		cy.mount(
+			<Search>
+				<SearchItem text="List Item"></SearchItem>
+				<SearchItemShowMore></SearchItemShowMore>
+			</Search>
+		);
+
+		cy.get("[ui5-search-item-show-more]")
+			.invoke("on", "ui5-click", cy.spy().as("clickSpy"));
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.should("be.focused");
+
+		cy.realType("l");
+
+		cy.get("[ui5-search-item-show-more]")
+			.realClick();
+
+		cy.get("@clickSpy")
+			.should("have.been.calledOnce");
+	});
+
+	it("click event on show-more-item selection with Enter", () => {
+		cy.mount(
+			<Search>
+				<SearchItem text="List Item"></SearchItem>
+				<SearchItemShowMore></SearchItemShowMore>
+			</Search>
+		);
+
+		cy.get("[ui5-search-item-show-more]")
+			.invoke("on", "ui5-click", cy.spy().as("clickSpy"));
+
+		cy.get("[ui5-search]")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-search]")
+			.should("be.focused");
+
+		cy.realType("l");
+
+		cy.realPress("ArrowDown");
+		cy.realPress("ArrowDown");
+
+		cy.realPress("Enter");
+
+		cy.get("@clickSpy")
+			.should("have.been.calledOnce");
+	});
+
 	it("search event prevention", () => {
 		cy.mount(
 			<Search>
@@ -1090,7 +1148,7 @@ describe("Events", () => {
 			.shadow()
 			.find("input")
 			.as("input");
-		
+
 		cy.get("@input")
 			.realClick();
 
@@ -1102,7 +1160,7 @@ describe("Events", () => {
 
 		cy.get("@search")
 			.should("have.value", "Item 1");
-		
+
 		cy.get("[ui5-search-item]").eq(0)
 			.should("have.attr", "highlight-text", "I");
 
@@ -1137,7 +1195,7 @@ describe("Events", () => {
 			.shadow()
 			.find("input")
 			.as("input");
-		
+
 		cy.get("@input")
 			.realClick();
 
@@ -1172,7 +1230,7 @@ describe("Events", () => {
 			.shadow()
 			.find("input")
 			.as("input");
-		
+
 		cy.get("@input")
 			.realClick();
 

packages/fiori/src/SearchItemShowMore.ts

@@ -1,5 +1,6 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -8,6 +9,11 @@ import SearchItemShowMoreTemplate from "./SearchItemShowMoreTemplate.js";
 import SearchItemCss from "./generated/themes/SearchItem.css.js";
 import SearchItemShowMoreCss from "./generated/themes/SearchItemShowMore.css.js";
 import { SEARCH_ITEM_SHOW_MORE_COUNT, SEARCH_ITEM_SHOW_MORE_NO_COUNT } from "./generated/i18n/i18n-defaults.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+
+type ShowMoreItemClickEventDetail = {
+	fromKeyboard: boolean;
+}
 
 /**
  * @class
@@ -25,7 +31,6 @@ import { SEARCH_ITEM_SHOW_MORE_COUNT, SEARCH_ITEM_SHOW_MORE_NO_COUNT } from "./g
  * @since 2.14.0
  * @experimental
  */
-
 @customElement({
 	tag: "ui5-search-item-show-more",
 	languageAware: true,
@@ -38,7 +43,23 @@ import { SEARCH_ITEM_SHOW_MORE_COUNT, SEARCH_ITEM_SHOW_MORE_NO_COUNT } from "./g
 	],
 })
 
+/**
+ * Fired when the component is activated, either with a mouse/tap
+ * or by pressing the Enter or Space keys.
+ *
+ * @public
+ * @param {boolean} fromKeyboard Indicates whether the event was fired
+ * due to keyboard interaction (Enter or Space) rather than mouse/tap.
+ */
+@event("click", {
+	bubbles: true,
+	cancelable: true,
+})
+
 class SearchItemShowMore extends ListItemBase {
+	eventDetails!: ListItemBase["eventDetails"] & {
+		"click": ShowMoreItemClickEventDetail;
+	}
 	/**
 	 * Specifies the number of additional items available to show.
 	 * This value replaces the placeholder (N) in the "Show more (N)" text.
@@ -76,8 +97,31 @@ class SearchItemShowMore extends ListItemBase {
 	_onfocusout() {
 		this.selected = false;
 	}
+
+	_onclick(e: MouseEvent | KeyboardEvent, fromKeyboard = false) {
+		e.stopImmediatePropagation();
+		this.fireDecoratorEvent("click", { fromKeyboard });
+	}
+
+	_onkeydown(e: KeyboardEvent) {
+		if (isEnter(e)) {
+			this._onclick(e, true);
+			e.preventDefault();
+		}
+	}
+
+	_onkeyup(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			this._onclick(e, true);
+			e.preventDefault();
+		}
+	}
 }
 
 SearchItemShowMore.define();
 
 export default SearchItemShowMore;
+
+export type {
+	ShowMoreItemClickEventDetail,
+};

packages/fiori/src/SearchItemShowMoreTemplate.tsx

@@ -9,6 +9,9 @@ export default function SearchItemShowMoreTemplate(this: SearchItemShowMore) {
 			aria-selected={this.selected}
 			onFocusIn={this._onfocusin}
 			onFocusOut={this._onfocusout}
+			onClick={this._onclick}
+			onKeyDown={this._onkeydown}
+			onKeyUp={this._onkeyup}
 		>
 			<span class="ui5-search-item-show-more-text">{this.showMoreTextCount}</span>
 		</li>

packages/fiori/test/pages/Search.html

@@ -76,6 +76,7 @@
 			{ text: "List Item 6", icon: "globe" }
 		];
 
+		const searchShow = document.getElementById("searchShowMore");
 		const group1 = document.getElementById("group1");
 		const visibleCount = 3;
 
@@ -121,13 +122,9 @@
 					}
 				}
 
-				showMoreEl.addEventListener("click", () => expandHiddenItems());
-
-				showMoreEl.addEventListener("keydown", (e) => {
-					if (e.key === "Enter") {
-						expandHiddenItems({ focusFirst: true })
-					}
-				});
+			showMoreEl.addEventListener("ui5-click", (e) => {
+					expandHiddenItems({ focusFirst: e.detail.fromKeyboard });
+			});
 			}
 		}
 
@@ -411,7 +408,7 @@
 					item.remove();
 				});
 			}, 100)
-			
+
 
 			if(e.target.value.length){
 				// simulate lazy loading

packages/website/docs/_samples/fiori/Search/ShowMore/main.js

@@ -13,7 +13,7 @@ import "@ui5/webcomponents-fiori/dist/SearchItemGroup.js";
 			{ text: "List Item 5", icon: "search" },
 			{ text: "List Item 6", icon: "globe" }
 		];
-
+		const searchShow = document.getElementById("searchShowMore");
 		const group1 = document.getElementById("group1");
 		const visibleCount = 3;
 
@@ -59,13 +59,8 @@ import "@ui5/webcomponents-fiori/dist/SearchItemGroup.js";
 						}, 0);
 					}
 				}
-
-				showMoreEl.addEventListener("click", () => expandHiddenItems());
-
-				showMoreEl.addEventListener("keydown", (e) => {
-					if (e.key === "Enter") {
-						expandHiddenItems({ focusFirst: true })
-					}
+				showMoreEl.addEventListener("ui5-click", (e) => {
+					expandHiddenItems({ focusFirst: e.detail.fromKeyboard });
 				});
 			}
 		}