fix(ui5-list): avoid close event conflicts (#7272)

* fix(ui5-list): avoid close event conflicts * fix: include ui5-li-notification-group
SAP · Jul 7, 2023 · 0b7617e · 0b7617e
1 parent 133ce18
commit 0b7617e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts
@@ -991,7 +991,12 @@ class List extends UI5Element {
 
 	// This is applicable to NotificationListItem
 	onItemClose(e: CustomEvent<ListItemCloseEventDetail>) {
-		this.fireEvent<ListItemCloseEventDetail>("item-close", { item: e.detail.item });
+		const target = e.target as UI5Element | null;
+		const shouldFireItemClose = target?.hasAttribute("ui5-li-notification") || target?.hasAttribute("ui5-li-notification-group");
+
+		if (shouldFireItemClose) {
+			this.fireEvent<ListItemCloseEventDetail>("item-close", { item: e.detail?.item });
+		}
 	}
 
 	onItemToggle(e: CustomEvent<ListItemToggleEventDetail>) {

diff --git a/packages/main/test/pages/List_test_page.html b/packages/main/test/pages/List_test_page.html
@@ -289,6 +289,18 @@ <h2 id="testHeader">Test aria</h2>
 		</ui5-li>
 	</ui5-list>
 
+	<ui5-list id="listWithCustomItems">
+		<ui5-li-custom id="liCustomWithSelect">
+			<ui5-select id="selectInLiCustom">
+				<ui5-option icon="iphone">Phone</ui5-option>
+				<ui5-option icon="ipad">Tablet</ui5-option>
+				<ui5-option icon="laptop" selected>Desktop</ui5-option>
+			</ui5-select>
+		</ui5-li-custom>
+	</ui5-list>
+
+	<input id="customListItemSelectResult" value="0"/>
+
 	<script>
 		'use strict';
 
@@ -388,6 +400,11 @@ <h2 id="testHeader">Test aria</h2>
 		growingScrollTest.addEventListener("ui5-loadMore", function(e) {
 			growingScrollTestCounter.value= ++groiwngScrollTestCounter;
 		});
+
+		listWithCustomItems.addEventListener("ui5-item-close", function(e) {
+			customListItemSelectResult.value = ++customListItemSelectResult.value
+		});
+
 	</script>
 
 	<ui5-list growing="Scroll">

diff --git a/packages/main/test/specs/List.spec.js b/packages/main/test/specs/List.spec.js
@@ -564,4 +564,14 @@ describe("List Tests", () => {
 
 		await browser.url(`test/pages/List_test_page.html`);
 	});
+
+	it('should not try to fire item-close if a select is closed from custom list item', async () => {
+		const select = await browser.$("#selectInLiCustom");
+		const itemCloseResult = await browser.$("#customListItemSelectResult");
+
+		await select.click();
+		await select.keys("Escape");
+
+		assert.strictEqual(await itemCloseResult.getProperty("value"), "0", "item-close event is not fired when the button is pressed.");
+	});
 });