fix(ui5-toolbar): prevent closing of overflow on interaction (#8936)

* fix(ui5-toolbar): prevent closing of overflow on interaction (#8924)

* fix(ui5-toolbar): prevent closing of overflow on interaction

* chore: more descriptive variable names

* test: add test

* chore: adapt test to static area

* test: fix tests

packages/main/src/Toolbar.ts

@@ -497,9 +497,10 @@ 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);
+			const eventType = e.type;
+			const eventTypeNonPrefixed: string = e.type.replace("ui5-", "");
+			const prevented = !abstractItem?.fireEvent(eventTypeNonPrefixed, e.detail, true);
+			const eventOptions = abstractItem?.subscribedEvents.get(eventType) || abstractItem?.subscribedEvents.get(eventTypeNonPrefixed);
 
 			if (prevented || abstractItem?.preventOverflowClosing || eventOptions?.preventClosing) {
 				return;

packages/main/test/pages/Toolbar.html

@@ -239,6 +239,20 @@
 			</div>
 
 		</section>
+		<section id="testEventpreventClosing">
+			<div style="width: 250px;">
+				<ui5-toolbar id="testEventpreventClosing-toolbar">
+					<ui5-toolbar-button text="Some longer title text">
+
+					</ui5-toolbar-button>
+					<ui5-toolbar-select>
+						<ui5-toolbar-select-option>
+							test
+						</ui5-toolbar-select-option>
+					</ui5-toolbar-select>
+				</ui5-toolbar>
+			</div>
+		</section>
 	</div>
 	<ui5-popover id="myPopup" placement="Bottom">
 		<div slot="header" style="padding: 0.5rem">Hello World</div>

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

@@ -51,4 +51,17 @@ describe("Toolbar general interaction", () => {
 		assert.strictEqual(await declineButton.getTagName(), "ui5-button", false, "Toolbar button is properly rendered");
 	});
 
+	it("Should properly prevent the closing of the overflow menu when preventClosing = true", async () => {
+		const toolbar = await browser.$("#testEventpreventClosing-toolbar")
+		const overflowButton = await toolbar.shadow$(".ui5-tb-overflow-btn");
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#testEventpreventClosing-toolbar");
+		const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-overflow-popover");
+		const select = await popover.$("[ui5-select]");
+
+		await overflowButton.click();
+		await select.click();
+
+		assert.strictEqual(await popover.getProperty("opened"), true, "Popover is opened");
+	});
+
 });