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;