From d311f07a7d7e86aff02f1b95a4cfb345de57bcc7 Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Fri, 11 Oct 2024 11:50:06 +0300 Subject: [PATCH 1/3] refactor(ui5-multi-combobox): change close event to non-bubbling --- packages/main/src/MultiComboBox.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index d2a6a5e774f8..de316f5927a3 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -237,9 +237,7 @@ type MultiComboboxItemWithSelection = { * @since 2.0.0 * @public */ -@event("close", { - bubbles: true, -}) +@event("close") /** * Fired when selection is changed by user interaction. From 40c2600106b5f662ac943c2a0caaa5974e5519ec Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Mon, 14 Oct 2024 13:52:34 +0300 Subject: [PATCH 2/3] chore: add test --- packages/main/cypress/specs/base/Events.cy.ts | 36 ++++++++++++++++--- packages/main/test/pages/EventBubbling.html | 8 +++++ 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/packages/main/cypress/specs/base/Events.cy.ts b/packages/main/cypress/specs/base/Events.cy.ts index 667e386415d2..37cbdae41462 100644 --- a/packages/main/cypress/specs/base/Events.cy.ts +++ b/packages/main/cypress/specs/base/Events.cy.ts @@ -6,6 +6,8 @@ import "../../../src/Input.js"; import "../../../src/SuggestionItem.js"; import "../../../src/features/InputSuggestions.js"; import "../../../src/MessageStrip.js"; +import "../../../src/MultiComboBox.js"; +import "../../../src/MultiComboBoxItem.js"; import "../../../src/Panel.js"; import "../../../src/CheckBox.js"; import "../../../src/Label.js"; @@ -124,7 +126,12 @@ describe("Event bubbling", () => { Hello World Hello - + + + + + + `); @@ -135,6 +142,8 @@ describe("Event bubbling", () => { .as("dialog"); cy.get("[ui5-select]") .as("select"); + cy.get("[ui5-multi-combobox]") + .as("multiCombobox"); cy.get("@app") .then(app => { @@ -143,12 +152,17 @@ describe("Event bubbling", () => { cy.get("@dialog") .then(dialog => { - dialog.get(0).addEventListener("close", cy.stub().as("dialogClosed")); // non-bubbling + dialog.get(0).addEventListener("close", cy.stub().as("dialogClosed")); }); cy.get("@select") .then(select => { - select.get(0).addEventListener("close", cy.stub().as("selClosed")); // non-bubbling + select.get(0).addEventListener("close", cy.stub().as("selClosed")); + }); + + cy.get("@multiCombobox") + .then(multiCombobox => { + multiCombobox.get(0).addEventListener("close", cy.stub().as("mcbClosed")); }); cy.get("@dialog").invoke("attr", "open", true); @@ -162,9 +176,23 @@ describe("Event bubbling", () => { .eq(1) .realClick(); - // assert - the close event of the Select does not bubble + // act - open and close MultiComboBox + cy.get("@multiCombobox") + .shadow() + .find(".inputIcon") + .realClick(); + + cy.get("@multiCombobox") + .shadow() + .find("[ui5-responsive-popover] [ui5-list] [ui5-li]") + .eq(0) + .realClick(); + + // assert - the close events of the Select and MultiComboBox do not bubble cy.get("@selClosed") .should("have.been.calledOnce"); + cy.get("@mcbClosed") + .should("have.been.calledOnce"); cy.get("@dialogClosed") .should("not.be.called"); cy.get("@appClosed") diff --git a/packages/main/test/pages/EventBubbling.html b/packages/main/test/pages/EventBubbling.html index d397941c1e4f..a16ff10aaf29 100644 --- a/packages/main/test/pages/EventBubbling.html +++ b/packages/main/test/pages/EventBubbling.html @@ -22,6 +22,11 @@ + + + + + (Information) with default icon and close button: @@ -48,6 +53,9 @@ mySelect.addEventListener("close", function(e) { console.log("Select on close") }); + myMcb.addEventListener("close", function(e) { + console.log("myMcb on close") + }); myInput.addEventListener("close", function(e) { console.log("Input on close") }); From 8a7f4a5ca9265f2aa7d50bb33f28bf1b206b5bdf Mon Sep 17 00:00:00 2001 From: ilhan007 Date: Tue, 15 Oct 2024 16:46:25 +0300 Subject: [PATCH 3/3] chore: update test --- packages/main/cypress/specs/base/Events.cy.ts | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/main/cypress/specs/base/Events.cy.ts b/packages/main/cypress/specs/base/Events.cy.ts index 37cbdae41462..b3d6e710ecf4 100644 --- a/packages/main/cypress/specs/base/Events.cy.ts +++ b/packages/main/cypress/specs/base/Events.cy.ts @@ -144,25 +144,29 @@ describe("Event bubbling", () => { .as("select"); cy.get("[ui5-multi-combobox]") .as("multiCombobox"); + cy.get("[ui5-multi-combobox]") + .shadow() + .find(".inputIcon") + .as("multiComboboxIcon"); cy.get("@app") .then(app => { - app.get(0).addEventListener("close", cy.stub().as("appClosed")); + app.get(0).addEventListener("ui5-close", cy.stub().as("appClosed")); }); cy.get("@dialog") .then(dialog => { - dialog.get(0).addEventListener("close", cy.stub().as("dialogClosed")); + dialog.get(0).addEventListener("ui5-close", cy.stub().as("dialogClosed")); }); cy.get("@select") .then(select => { - select.get(0).addEventListener("close", cy.stub().as("selClosed")); + select.get(0).addEventListener("ui5-close", cy.stub().as("selClosed")); }); cy.get("@multiCombobox") .then(multiCombobox => { - multiCombobox.get(0).addEventListener("close", cy.stub().as("mcbClosed")); + multiCombobox.get(0).addEventListener("ui5-close", cy.stub().as("mcbClosed")); }); cy.get("@dialog").invoke("attr", "open", true); @@ -176,16 +180,17 @@ describe("Event bubbling", () => { .eq(1) .realClick(); - // act - open and close MultiComboBox - cy.get("@multiCombobox") - .shadow() - .find(".inputIcon") + // act - open the MultiComboBox + cy.get("@multiComboboxIcon") .realClick(); cy.get("@multiCombobox") .shadow() - .find("[ui5-responsive-popover] [ui5-list] [ui5-li]") - .eq(0) + .find("[ui5-responsive-popover]") + .should("be.visible"); + + // act - close the MultiComboBox + cy.get("@multiComboboxIcon") .realClick(); // assert - the close events of the Select and MultiComboBox do not bubble @@ -214,7 +219,7 @@ describe("Event bubbling", () => { cy.get("@checkbox") .then(checkbox => { - checkbox.get(0).addEventListener("change", e => e.preventDefault()); + checkbox.get(0).addEventListener("ui5-change", e => e.preventDefault()); }); // act