fix(ui5-toolbar-select): sync programmatic selection (#12790)

Programmatic changes to ToolbarSelectOption.selected property now properly synchronize with the internal Select component and maintain single selection.

- Add custom property setter for ToolbarSelectOption.selected
- Ensure sibling options are deselected when one is programmatically selected
- Sync selection state to internal Select component value
- Modify _syncOptions to use property setter for unified selection handling
- Maintain backward compatibility for mouse-based selection
- Add cypress test

Fixes: #12619

Author: NakataCode

packages/main/cypress/specs/ToolbarSelect.cy.tsx

@@ -344,4 +344,42 @@ describe("Toolbar general interaction", () => {
 			.eq(0)
 			.should("not.have.attr", "selected");
 	});
+
+	it("Should ensure only one option is selected at any time", () => {
+		cy.mount(
+			<>
+				<Toolbar>
+					<ToolbarSelect>
+						<ToolbarSelectOption id="opt1">1</ToolbarSelectOption>
+						<ToolbarSelectOption id="opt2">2</ToolbarSelectOption>
+						<ToolbarSelectOption id="opt3">3</ToolbarSelectOption>
+					</ToolbarSelect>
+				</Toolbar>
+				<Button id="selectMultiple">Select Multiple</Button>
+			</>
+		);
+
+		// Set up button to attempt selecting multiple options
+		cy.get("#selectMultiple").then($btn => {
+			$btn.get(0).addEventListener("ui5-click", () => {
+				const opt1 = document.getElementById("opt1") as ToolbarSelectOption;
+				const opt2 = document.getElementById("opt2") as ToolbarSelectOption;
+				const opt3 = document.getElementById("opt3") as ToolbarSelectOption;
+
+				// Try to select multiple options
+				opt1.selected = true;
+				opt2.selected = true;
+				opt3.selected = true; // This should be the final selection
+			});
+		});
+
+		// Click button to attempt multiple selections
+		cy.get("#selectMultiple").realClick();
+
+		// Verify only the last option (opt3) is selected
+		cy.get("[ui5-toolbar-select-option]").eq(2).should("have.attr", "selected");
+		cy.get("[ui5-toolbar-select-option]").eq(0).should("not.have.attr", "selected");
+		cy.get("[ui5-toolbar-select-option]").eq(1).should("not.have.attr", "selected");
+		cy.get("ui5-select", { includeShadowDom: true }).should("have.attr", "value", "3");
+	});
 });

packages/main/src/ToolbarSelect.ts

@@ -201,11 +201,7 @@ class ToolbarSelect extends ToolbarItem {
 	_syncOptions(selectedOption: HTMLElement): void {
 		const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
 		this.options.forEach((option: ToolbarSelectOption, index: number) => {
-			if (index === selectedOptionIndex) {
-				option.setAttribute("selected", "");
-			} else {
-				option.removeAttribute("selected");
-			}
+			option.selected = index === selectedOptionIndex;
 		});
 	}
 

packages/main/src/ToolbarSelectOption.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import type ToolbarSelect from "./ToolbarSelect.js";
 
 /**
  * @class
@@ -23,7 +24,32 @@ class ToolbarSelectOption extends UI5Element {
 	 * @public
 	 */
 	@property({ type: Boolean })
-	selected = false;
+	set selected(value: boolean) {
+		if (value) {
+			this.setAttribute("selected", "");
+			this._clearSiblingsAndSync();
+		} else {
+			this.removeAttribute("selected");
+		}
+	}
+
+	get selected(): boolean {
+		return this.hasAttribute("selected");
+	}
+
+	_clearSiblingsAndSync(): void {
+		const parent = this.parentElement as ToolbarSelect;
+		if (parent) {
+			parent.options?.forEach(option => {
+				if (option !== this) {
+					option.removeAttribute("selected");
+				}
+			});
+			if (parent.select) {
+				parent.select.value = this.textContent || "";
+			}
+		}
+	}
 
 	/**
 	 * Defines the text of the component.