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

Author: NakataCode

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.