fix(ui5-message-strip): close event bubbling (#10690)

SAP · Jan 30, 2025 · 6bbc4c5 · 6bbc4c5
1 parent 500b6e8
commit 6bbc4c5
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 6 deletions.
diff --git a/packages/main/cypress/specs/MessageStrip.cy.ts b/packages/main/cypress/specs/MessageStrip.cy.ts
@@ -1,5 +1,6 @@
 import { html } from "lit";
 import "../../src/MessageStrip.js";
+import "../../src/ResponsivePopover.js";
 import {
 	MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION,
 	MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM,
@@ -69,6 +70,66 @@ describe("API", () => {
 				.should("have.attr", "title", btnText);
 		});
 	});
+
+	it("should not close the popover when close button is clicked", () => {
+		cy.mount(`<ui5-button id="btnopen">Open ResponsivePopover</ui5-button>
+			<ui5-responsive-popover
+	opener="btnopen"
+	header-text="Newsletter subscription"
+	id="resppopover"
+  >
+	<div class="popover-content">
+	  <ui5-message-strip design="Information"
+		>Information Message</ui5-message-strip
+	  >
+	</div>
+
+	<div slot="footer" class="popover-footer">
+	  <ui5-button id="closePopoverButton" design="Emphasized"
+		>Subscribe</ui5-button
+	  >
+	</div>
+  </ui5-responsive-popover>`);
+
+		cy.get("ui5-button")
+			.as("button");
+
+		cy.get("ui5-responsive-popover")
+			.as("popover");
+
+		cy.get("@button")
+			.then($btn => {
+				$btn[0].addEventListener("click", () => {
+					cy.get("@popover").then($popover => {
+						$popover[0].setAttribute("open", "");
+					});
+				});
+			});
+
+		cy.get("@popover")
+			.then($popover => {
+				$popover[0].addEventListener("close", () => {
+					$popover[0].removeAttribute("open");
+				});
+			});
+
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@popover")
+			.should("have.attr", "open");
+
+		cy.get("ui5-message-strip")
+			.shadow()
+			.find("ui5-button")
+			.as("buttonMS");
+
+		cy.get("@buttonMS")
+			.realClick();
+
+		cy.get("@popover")
+			.should("have.attr", "open");
+	});
 });
 
 describe("Accessibility", () => {

diff --git a/packages/main/cypress/specs/base/Events.cy.ts b/packages/main/cypress/specs/base/Events.cy.ts
@@ -96,16 +96,16 @@ describe("Event bubbling", () => {
 			.realClick();
 
 		// assert
-		// - the close event of the MessageStrip bubbles:  MessageStrip -> Dialog -> App
+		// - the close event of the MessageStrip doesn't bubble
 		// - the close event of the Input bubbles: Input -> Dialog -> App
 		cy.get("@inpClosed")
 			.should("have.been.calledOnce");
 		cy.get("@msgClosed")
 			.should("have.been.calledOnce");
 		cy.get("@dialogClosed")
-			.should("have.been.calledTwice");
+			.should("have.been.calledOnce");
 		cy.get("@appClosed")
-			.should("have.been.calledTwice");
+			.should("have.been.calledOnce");
 
 		// act - toggle Panel
 		cy.get("@panel")

diff --git a/packages/main/src/MessageStrip.ts b/packages/main/src/MessageStrip.ts
@@ -87,9 +87,7 @@ type DesignCloseButtonTooltip = Record<MessageStripDesign, string>;
  * click/tap or by using the Enter or Space key.
  * @public
  */
-@event("close", {
-	bubbles: true,
-})
+@event("close")
 
 class MessageStrip extends UI5Element {
 	eventDetails!: {

diff --git a/packages/main/test/pages/MessageStrip.html b/packages/main/test/pages/MessageStrip.html
@@ -21,6 +21,21 @@
 	<ui5-message-strip id="messageStrip">Hello World!</ui5-message-strip>
 	<ui5-input id="inputField"></ui5-input>
 
+	<br />
+	<h4> MessageStrip inside ResponsivePopover</h4>
+	<ui5-button id="btnopen">Open ResponsivePopover</ui5-button>
+	<ui5-responsive-popover
+	opener="btnopen"
+	header-text="Newsletter subscription"
+	id="resppopover"
+	placement="Bottom">
+	<div class="popover-content">
+	  <ui5-message-strip design="Information">Information Message</ui5-message-strip>
+	</div>
+	<div slot="footer" class="popover-footer">
+	  <ui5-button id="closePopoverButton" design="Emphasized">Subscribe</ui5-button>
+	</div>
+  </ui5-responsive-popover>
 
 	<ui5-message-strip class="top" design="Information">Default (Information) with default icon and close button:</ui5-message-strip>
 	<ui5-message-strip class="top" design="Negative">Negative with <b>default</b> icon and close button:</ui5-message-strip>
@@ -77,6 +92,15 @@
 			mStrip.design = 'ColorSet1';
 			mStrip.colorScheme = '1';
 		});
+
+		const btn = document.getElementById("btnopen");
+		const popover = document.getElementById("resppopover");
+		btn.addEventListener("click", () => {
+			popover.open = !popover.open;
+		});
+		popover.addEventListener("close", () => {
+			popover.open = false;
+		});
 	</script>
 </body>
 </html>