diff --git a/packages/fiori/cypress/specs/Search.cy.tsx b/packages/fiori/cypress/specs/Search.cy.tsx
index ad96b2cba5d0..04b671ff3109 100644
--- a/packages/fiori/cypress/specs/Search.cy.tsx
+++ b/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(
+
+
+
+
+ );
+
+ 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(
+
+
+
+
+ );
+
+ 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(
@@ -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();
diff --git a/packages/fiori/src/SearchItemShowMore.ts b/packages/fiori/src/SearchItemShowMore.ts
index c9d906598e8b..2cfcbeff7560 100644
--- a/packages/fiori/src/SearchItemShowMore.ts
+++ b/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,
+};
diff --git a/packages/fiori/src/SearchItemShowMoreTemplate.tsx b/packages/fiori/src/SearchItemShowMoreTemplate.tsx
index 60b56107b3ef..c6c0a5f57904 100644
--- a/packages/fiori/src/SearchItemShowMoreTemplate.tsx
+++ b/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}
>
{this.showMoreTextCount}
diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html
index 475006aebff2..7a034794a8fa 100644
--- a/packages/fiori/test/pages/Search.html
+++ b/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
diff --git a/packages/website/docs/_samples/fiori/Search/ShowMore/main.js b/packages/website/docs/_samples/fiori/Search/ShowMore/main.js
index 1347c1c24e9b..057c72332ed9 100644
--- a/packages/website/docs/_samples/fiori/Search/ShowMore/main.js
+++ b/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 });
});
}
}