diff --git a/packages/main/cypress/specs/ToolbarSelect.cy.tsx b/packages/main/cypress/specs/ToolbarSelect.cy.tsx index 3da2eb1a5b6a..994165672765 100644 --- a/packages/main/cypress/specs/ToolbarSelect.cy.tsx +++ b/packages/main/cypress/specs/ToolbarSelect.cy.tsx @@ -1,6 +1,7 @@ import Toolbar from "../../src/Toolbar.js"; import ToolbarSelect from "../../src/ToolbarSelect.js"; import ToolbarSelectOption from "../../src/ToolbarSelectOption.js"; +import Button from "../../src/Button.js"; describe("Toolbar general interaction", () => { it("Should render the select with the correct attributes", () => { @@ -264,10 +265,10 @@ describe("Toolbar general interaction", () => { cy.mount( - 1 - 2 - 3 - + 1 + 2 + 3 + ); cy.viewport(220, 1080); // Set a small viewport width to trigger overflow @@ -282,4 +283,65 @@ describe("Toolbar general interaction", () => { // Verify the toolbar-select is rendered inside the popover cy.get("ui5-toolbar-select").should("be.visible"); }); + + it("Should update selection when option's selected property is changed programmatically", () => { + cy.mount( + <> + + + 1 + 2 + 3 + 4 + + + + + ); + + // Set up button click handler + cy.get("#btn").then($btn => { + $btn.get(0).addEventListener("ui5-click", () => { + // First, deselect all options + const select = document.querySelector("ui5-toolbar-select"); + const options = select?.querySelectorAll("ui5-toolbar-select-option"); + options?.forEach(opt => { + (opt as ToolbarSelectOption).selected = false; + }); + // Then select option 2 + const opt2 = document.getElementById("opt2") as ToolbarSelectOption; + opt2.selected = true; + }); + }); + + // Verify initial state - first option has selected attribute + cy.get("[ui5-toolbar]") + .find("[ui5-toolbar-select]") + .shadow() + .find("[ui5-select]") + .find("[ui5-option]") + .eq(0) + .should("have.attr", "selected"); + + // Click button using realClick + cy.get("#btn").realClick(); + + // Verify option 2 now has the selected attribute + cy.get("[ui5-toolbar]") + .find("[ui5-toolbar-select]") + .shadow() + .find("[ui5-select]") + .find("[ui5-option]") + .eq(1) + .should("have.attr", "selected"); + + // Verify option 1 no longer has selected attribute + cy.get("[ui5-toolbar]") + .find("[ui5-toolbar-select]") + .shadow() + .find("[ui5-select]") + .find("[ui5-option]") + .eq(0) + .should("not.have.attr", "selected"); + }); }); \ No newline at end of file diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index 2e8451f9973d..cab2baea6341 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -91,6 +91,7 @@ class ToolbarSelect extends ToolbarItem { @slot({ "default": true, type: HTMLElement, + invalidateOnChildChange: true, }) options!: Array;