[RFC] feat(ui5-li): add semantic click event to ListItemBase

packages/fiori/src/Search.ts

@@ -44,6 +44,7 @@ interface ISearchSuggestionItem extends UI5Element {
 	selected: boolean;
 	text: string;
 	items?: ISearchSuggestionItem[];
+	eventDetails: { click?: object };
 }
 
 type SearchEventDetails = {

packages/fiori/src/SearchItemShowMore.ts

@@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 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 type { ListItemBaseClickEventDetail } 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";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -11,7 +12,7 @@ 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 = {
+type ShowMoreItemClickEventDetail = ListItemBaseClickEventDetail & {
 	fromKeyboard: boolean;
 }
 
@@ -100,7 +101,7 @@ If a number is provided, it displays "Show more (N)", where N is that number.
 
 	_onclick(e: MouseEvent | KeyboardEvent, fromKeyboard = false) {
 		e.stopImmediatePropagation();
-		this.fireDecoratorEvent("click", { fromKeyboard });
+		this.fireDecoratorEvent("click", { item: this, originalEvent: e, fromKeyboard });
 	}
 
 	_onkeydown(e: KeyboardEvent) {

packages/main/cypress/specs/List.cy.tsx

@@ -2796,4 +2796,102 @@ describe("List sticky header", () => {
 					});
 			});
 	});
+});
+
+describe("ListItemBase semantic click event", () => {
+	it("fires click event on list item when clicked", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard id="item1">Item 1</ListItemStandard>
+				<ListItemStandard id="item2">Item 2</ListItemStandard>
+			</List>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("#item1").realClick();
+
+		cy.get("@clickStub").should("have.been.calledOnce");
+		cy.get("@clickStub").should((stub: any) => {
+			const event = stub.firstCall.args[0];
+			expect(event).to.be.instanceOf(CustomEvent);
+			expect(event.detail.item).to.exist;
+			expect(event.detail.originalEvent).to.be.instanceOf(MouseEvent);
+		});
+	});
+
+	it("fires click event on list item when activated with Enter key", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard id="item1">Item 1</ListItemStandard>
+			</List>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("#item1").realClick();
+		cy.realPress("Enter");
+
+		cy.get("@clickStub")
+			.should("have.been.calledTwice");
+	});
+
+	it("fires click event on list item when activated with Space key", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard id="item1">Item 1</ListItemStandard>
+			</List>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("#item1").realClick();
+		cy.realPress("Space");
+
+		cy.get("@clickStub")
+			.should("have.been.calledTwice");
+	});
+
+	it("does not fire click event on disabled list item", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard id="item1" disabled>Item 1</ListItemStandard>
+			</List>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("#item1").realClick({ position: "center" });
+
+		cy.get("@clickStub").should("not.have.been.called");
+	});
+
+	it("fires both click and item-click events", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard id="item1">Item 1</ListItemStandard>
+			</List>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("itemClickStub"));
+		});
+
+		cy.get("[ui5-list]").then(($list) => {
+			$list[0].addEventListener("ui5-item-click", cy.stub().as("listItemClickStub"));
+		});
+
+		cy.get("#item1").realClick();
+
+		cy.get("@itemClickStub").should("have.been.calledOnce");
+		cy.get("@listItemClickStub").should("have.been.calledOnce");
+	});
 });

packages/main/cypress/specs/Menu.cy.tsx

@@ -1413,4 +1413,92 @@ describe("Menu - Submenu Focus Behavior", () => {
 		cy.get("@childItem")
 			.should("be.focused");
 	});
+});
+
+describe("MenuItem semantic click event", () => {
+	it("fires click event on menu item when clicked", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem id="item1" text="New File"></MenuItem>
+					<MenuItem id="item2" text="New Folder"></MenuItem>
+				</Menu>
+			</>
+		);
+
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen({ opener: "btnOpen" });
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("#item1").realClick();
+
+		cy.get("@clickStub").should("have.been.calledOnce");
+		cy.get("@clickStub").should((stub: any) => {
+			const event = stub.firstCall.args[0];
+			expect(event).to.be.instanceOf(CustomEvent);
+			expect(event.detail.item).to.exist;
+			expect(event.detail.originalEvent).to.be.instanceOf(MouseEvent);
+		});
+	});
+
+	it("fires click event on menu item when activated with Enter", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem id="item1" text="New File"></MenuItem>
+				</Menu>
+			</>
+		);
+
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen({ opener: "btnOpen" });
+
+		cy.get("[ui5-menu]")
+			.ui5MenuOpened();
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("[ui5-menu-item]")
+			.ui5MenuItemPress("Enter");
+
+		cy.get("@clickStub").should("have.been.calledOnce");
+	});
+
+	it("fires both click on MenuItem and item-click on Menu", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu id="menu" opener="btnOpen">
+					<MenuItem id="item1" text="New File"></MenuItem>
+				</Menu>
+			</>
+		);
+
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen({ opener: "btnOpen" });
+
+		cy.get("[ui5-menu]")
+			.ui5MenuOpened();
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("itemClickStub"));
+		});
+
+		cy.get("#menu").then(($menu) => {
+			$menu[0].addEventListener("ui5-item-click", cy.stub().as("menuItemClickStub"));
+		});
+
+		cy.get("[ui5-menu-item]")
+			.ui5MenuItemClick();
+
+		cy.get("@itemClickStub").should("have.been.calledOnce");
+		cy.get("@menuItemClickStub").should("have.been.calledOnce");
+	});
 });

packages/main/cypress/specs/Tree.cy.tsx

@@ -779,4 +779,104 @@ describe("Tree drag and drop tests", () => {
 			});
 		});
 	});
+});
+
+describe("TreeItem semantic click event", () => {
+	it("fires click event on tree item when clicked", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem id="item1" text="Tree 1"></TreeItem>
+				<TreeItem text="Tree 2"></TreeItem>
+			</Tree>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("#item1").realClick();
+
+		cy.get("@clickStub").should("have.been.calledOnce");
+		cy.get("@clickStub").should((stub: any) => {
+			const event = stub.firstCall.args[0];
+			expect(event).to.be.instanceOf(CustomEvent);
+			expect(event.detail.item).to.exist;
+			expect(event.detail.originalEvent).to.be.instanceOf(MouseEvent);
+		});
+	});
+
+	it("fires click event on tree item when activated with Enter", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem id="item1" text="Tree 1"></TreeItem>
+				<TreeItem text="Tree 2"></TreeItem>
+			</Tree>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("#item1").realClick();
+		cy.realPress("Enter");
+
+		cy.get("@clickStub").should("have.been.calledTwice");
+	});
+
+	it("fires click event on tree item when activated with Space", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem id="item1" text="Tree 1"></TreeItem>
+				<TreeItem text="Tree 2"></TreeItem>
+			</Tree>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("#item1").realClick();
+		cy.realPress("Space");
+
+		cy.get("@clickStub").should("have.been.calledTwice");
+	});
+
+	it("does not fire click event on disabled tree item", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem id="item1" text="Tree 1" disabled></TreeItem>
+				<TreeItem text="Tree 2"></TreeItem>
+			</Tree>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("clickStub"));
+		});
+
+		cy.get("#item1").realClick({ force: true });
+
+		cy.get("@clickStub").should("not.have.been.called");
+	});
+
+	it("fires both click on TreeItem and item-click on Tree", () => {
+		cy.mount(
+			<Tree id="tree">
+				<TreeItem id="item1" text="Tree 1"></TreeItem>
+				<TreeItem text="Tree 2"></TreeItem>
+			</Tree>
+		);
+
+		cy.get("#item1").then(($item) => {
+			$item[0].addEventListener("click", cy.stub().as("itemClickStub"));
+		});
+
+		cy.get("#tree").then(($tree) => {
+			$tree[0].addEventListener("ui5-item-click", cy.stub().as("treeItemClickStub"));
+		});
+
+		cy.get("#item1").realClick();
+
+		cy.get("@itemClickStub").should("have.been.calledOnce");
+		cy.get("@treeItemClickStub").should("have.been.calledOnce");
+	});
 });

packages/main/src/ComboBox.ts

@@ -106,7 +106,8 @@ interface IComboBoxItem extends UI5Element {
 	selected?: boolean,
 	additionalText?: string,
 	_isVisible?: boolean,
-	items?: Array<IComboBoxItem>
+	items?: Array<IComboBoxItem>,
+	eventDetails: { click?: object },
 }
 
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;

packages/main/src/Input.ts

@@ -110,6 +110,7 @@ interface IInputSuggestionItem extends UI5Element {
 	focused: boolean;
 	additionalText?: string;
 	items?: IInputSuggestionItem[];
+	eventDetails: { click?: object };
 }
 
 interface IInputSuggestionItemSelectable extends IInputSuggestionItem {