diff --git a/packages/main/cypress/specs/List.cy.tsx b/packages/main/cypress/specs/List.cy.tsx index 0516f36d2611..1be9f18ffa47 100644 --- a/packages/main/cypress/specs/List.cy.tsx +++ b/packages/main/cypress/specs/List.cy.tsx @@ -14,6 +14,8 @@ import Option from "../../src/Option.js"; import CheckBox from "../../src/CheckBox.js"; import Bar from "../../src/Bar.js"; import Link from "../../src/Link.js"; +import Panel from "../../src/Panel.js"; +import Label from "../../src/Label.js"; function getGrowingWithScrollList(length: number, height: string = "100px") { return ( @@ -205,6 +207,59 @@ describe("List Tests", () => { .should("have.class", "ui5-hidden-text") .should("contain.text", "This button will load additional products to the list. Click or press Enter to see more items."); }); + + it("does not fire item-toggle for nested panel toggle events", () => { + cy.mount( + + + + + + + + ); + + cy.get("[ui5-list]").as("list"); + + cy.get("@list") + .then(list => { + list.get(0).addEventListener("ui5-item-toggle", cy.stub().as("itemToggle")); + }); + + cy.get("[ui5-panel]") + .shadow() + .find(".ui5-panel-header") + .realClick(); + + cy.get("[ui5-panel]") + .should("have.attr", "collapsed"); + + cy.get("@itemToggle") + .should("not.have.been.called"); + }); + + it("does not crash when a bubbling ui5-toggle has null detail", () => { + cy.mount( + + +
Nested interactive content
+
+
+ ); + + cy.window().then(win => { + const listItem = win.document.getElementById("listItemWithNestedContent"); + const toggleEvent = new win.CustomEvent("ui5-toggle", { + detail: null, + bubbles: true, + composed: true, + }); + + listItem?.dispatchEvent(toggleEvent); + }); + + cy.get("[ui5-list]").should("exist"); + }); }); describe("List - Growing with scroll", () => { diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index 2d34da5cefd3..775690eaa1d5 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -1419,7 +1419,13 @@ class List extends UI5Element { return; } - this.fireDecoratorEvent("item-toggle", { item: e.detail.item }); + const item = e.detail?.item; + + if (!item) { + return; + } + + this.fireDecoratorEvent("item-toggle", { item }); } onForwardBefore(e: CustomEvent) {