fix(ui5-toolbar-select): add invalidateOnChildChange (#12676)

Problem:
- When programmatically changing the selected property on a ToolbarSelectOption, the ToolbarSelect component's display was not updating to reflect the change.
- This occurred because the ToolbarSelect was not invalidating and re-rendering when its child options' properties changed.

Solution:
- Added invalidateOnChildChange: true to the options slot decorator in ToolbarSelect to trigger re-rendering when child ToolbarSelectOption properties change
- Also added cypress test

Fixes: #12619

Author: NakataCode

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(
 			<Toolbar id="otb_d">
 				<ToolbarSelect style="width: 201px;" id="toolbar-select">
-						<ToolbarSelectOption>1</ToolbarSelectOption>
-						<ToolbarSelectOption selected>2</ToolbarSelectOption>
-						<ToolbarSelectOption>3</ToolbarSelectOption>
-					</ToolbarSelect>
+					<ToolbarSelectOption>1</ToolbarSelectOption>
+					<ToolbarSelectOption selected>2</ToolbarSelectOption>
+					<ToolbarSelectOption>3</ToolbarSelectOption>
+				</ToolbarSelect>
 			</Toolbar>
 		);
 		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(
+			<>
+				<Toolbar>
+					<ToolbarSelect>
+						<ToolbarSelectOption>1</ToolbarSelectOption>
+						<ToolbarSelectOption id="opt2">2</ToolbarSelectOption>
+						<ToolbarSelectOption>3</ToolbarSelectOption>
+						<ToolbarSelectOption>4</ToolbarSelectOption>
+					</ToolbarSelect>
+				</Toolbar>
+				<Button id="btn">select option 2</Button>
+			</>
+		);
+
+		// 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");
+	});
 });

packages/main/src/ToolbarSelect.ts

@@ -91,6 +91,7 @@ class ToolbarSelect extends ToolbarItem {
 	@slot({
 		"default": true,
 		type: HTMLElement,
+		invalidateOnChildChange: true,
 	})
 	options!: Array<ToolbarSelectOption>;