fix(ui5-toolbar): fire noConflict events correctly (#8169)

SAP · Jan 26, 2024 · 6890d94 · 6890d94
1 parent a5a2f8b
commit 6890d94
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
@@ -491,7 +491,6 @@ class Toolbar extends UI5Element {
 	onInteract(e: CustomEvent) {
 		const target = e.target as HTMLElement;
 		const item = target.closest<ToolbarItem>(".ui5-tb-item") || target.closest<ToolbarItem>(".ui5-tb-popover-item");
-		const eventType: string = e.type;
 
 		if (target === this.overflowButtonDOM) {
 			this.toggleOverflow();
@@ -506,6 +505,7 @@ class Toolbar extends UI5Element {
 
 		if (refItemId) {
 			const abstractItem = this.getItemByID(refItemId);
+			const eventType: string = e.type.replace("ui5-", "");
 			const prevented = !abstractItem?.fireEvent(eventType, e.detail, true);
 			const eventOptions = abstractItem?.subscribedEvents.get(eventType);
 

diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts
@@ -150,9 +150,9 @@ class ToolbarSelect extends ToolbarItem {
 		const map = new Map();
 
 		map.set("click", { preventClosing: true });
-		map.set("change", { preventClosing: false });
-		map.set("open", { preventClosing: true });
-		map.set("close", { preventClosing: true });
+		map.set("ui5-change", { preventClosing: false });
+		map.set("ui5-open", { preventClosing: true });
+		map.set("ui5-close", { preventClosing: true });
 
 		return map;
 	}
@@ -184,7 +184,7 @@ class ToolbarSelect extends ToolbarItem {
 	}
 
 	_onEventHandler(e: Event): void {
-		if (e.type === "change") {
+		if (e.type === "ui5-change") {
 			// update options
 			const selectedOption = (e as CustomEvent<ToolbarSelectChangeEventDetail>).detail.selectedOption;
 			const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));

diff --git a/packages/main/test/specs/ToolbarSelect.spec.js b/packages/main/test/specs/ToolbarSelect.spec.js
@@ -32,21 +32,21 @@ describe("Toolbar general interaction", () => {
 		assert.strictEqual(accessibleNameRef, "title", "Select accessible name ref is correct");
 	});
 
-	// // Events
+	// Events
 
-	// it.only("Should fire change event on selection change", async () => {
-	// 	const toolbar = await browser.$("ui5-toolbar");
-	// 	const select = await toolbar.shadow$("ui5-select");
-	// 	const selectResult = await browser.$("input[placeholder='Changed']");
+	it("Should fire change event on selection change", async () => {
+		const toolbar = await browser.$("ui5-toolbar");
+		const select = await toolbar.shadow$("ui5-select");
+		const selectResult = await browser.$("input[placeholder='Changed']");
 
-	// 	await select.click();
-	// 	await select.keys("ArrowDown");
-	// 	await select.keys("Enter");
+		await select.click();
+		await select.keys("ArrowUp");
+		await select.keys("Enter");
 
-	// 	const selectResultText = await selectResult.getValue();
+		const selectResultText = await selectResult.getValue();
 
-	// 	assert.strictEqual(selectResultText, "1", "Select change event is fired correctly");
-	// });
+		assert.strictEqual(selectResultText, "1", "Select change event is fired correctly");
+	});
 
 	// Popover