fix(ui5-li-custom): prevent firing of events (#2462)

Author: fifoosid

packages/main/src/CustomListItem.js

@@ -53,6 +53,22 @@ class CustomListItem extends ListItem {
 		return [ListItem.styles, customListItemCss];
 	}
 
+	_onkeydown(event) {
+		if (!this.focused) {
+			return;
+		}
+
+		super._onkeydown(event);
+	}
+
+	_onkeyup(event) {
+		if (!this.focused) {
+			return;
+		}
+
+		super._onkeyup(event);
+	}
+
 	get classes() {
 		const result = super.classes;
 		result.main["ui5-custom-li-root"] = true;

packages/main/test/pages/List_test_page.html

@@ -154,6 +154,26 @@ <h2 id="testHeader">Test aria</h2>
 		<ui5-li>HP Monitor 24</ui5-li>
 	</ui5-list>
 	<ui5-button id="changeEmptyItem">Change empty item text</ui5-button>
+	<br>
+	<ui5-title>Events within ui5-li-custom</ui5-title>
+	<br>
+
+	<ui5-list id="customList" separators="Inner">
+		<ui5-li-custom>
+			<ui5-button id="liBtn1" design="Transparent">List Button 1</ui5-button>
+			<br />
+		</ui5-li-custom>
+		<ui5-li-custom>
+			<ui5-button design="Transparent">List Button 2</ui5-button>
+			<br />
+		</ui5-li-custom>
+		<ui5-li-custom>
+			<ui5-button design="Transparent">List Button 2</ui5-button>
+			<br />
+		</ui5-li-custom>
+	</ui5-list>
+
+	<ui5-input value="0" id="customListItemEvents"></ui5-input>
 
 	<script>
 		'use strict';
@@ -223,6 +243,15 @@ <h2 id="testHeader">Test aria</h2>
 		detailListItem.addEventListener("ui5-detailClick", function(e) {
 			detailPressCounter.innerHTML = parseInt(detailPressCounter.innerHTML) + 1;
 		});
+
+		var ui5List = document.getElementById("customList"),
+			liBtn1 = document.getElementById("liBtn1"),
+			customListItemEventsValue = 0,
+			customListItemEventsInput = document.getElementById("customListItemEvents");
+
+		ui5List.addEventListener("ui5-item-click", (event) => {
+			customListItemEventsInput.value = ++customListItemEventsValue;
+		});
 	</script>
 </body>
 </html>

packages/main/test/specs/List.spec.js

@@ -8,7 +8,7 @@ describe("List Tests", () => {
 
 	it("List is rendered", () => {
 		const list = browser.$("ui5-list").shadow$(".ui5-list-root");
-		
+
 		assert.ok(list, "List is rendered");
 	});
 
@@ -79,7 +79,7 @@ describe("List Tests", () => {
 
 			return result.length;
 		});
-		
+
 		assert.strictEqual(listItemsLength, 3, "List items are rendered");
 	});
 
@@ -246,7 +246,7 @@ describe("List Tests", () => {
 		const listWithCustomHeader = $("#listWithCustomHeader");
 		const ulInternalHeader = listWithInternalHeader.shadow$(".ui5-list-ul");
 		const ulCustomHeader = listWithCustomHeader.shadow$(".ui5-list-ul");
-		
+
 		// assert: List with internal header
 		const listWithInternalHeaderId = listWithInternalHeader.getProperty("_id");
 		assert.strictEqual(ulInternalHeader.getAttribute("aria-label"),
@@ -286,9 +286,19 @@ describe("List Tests", () => {
 		});
 
 		// assert
-		assert.strictEqual(emptyItem.getProperty("innerHTML"), NEW_TEXT,
-			"The value is updated");
-		assert.strictEqual(assignedNodesAfter, 1,
-			"The new text is slotted.");
+		assert.strictEqual(emptyItem.getProperty("innerHTML"), NEW_TEXT, "The value is updated");
+		assert.strictEqual(assignedNodesAfter, 1, "The new text is slotted.");
+	});
+
+	it("tests events for ui5-li-custom", () => {
+		const button = $("#liBtn1");
+		const input = $("#customListItemEvents");
+
+		button.click();
+
+		browser.keys("Enter");
+		browser.keys("Space");
+
+		assert.strictEqual(input.getProperty("value"), "0", "item-click event is not fired when the button is pressed.");
 	});
 });