fix(ui5-combobox): set selectedValue correctly on change

Author: niyap

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

@@ -3529,6 +3529,31 @@ describe("SelectedValue API", () => {
 		// Verify the second item is selected
 		cy.get("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
 	});
+
+	it("should have selectedValue available in change event on first selection", () => {
+		const changeSpy = cy.stub().as("changeSpy");
+		cy.mount(
+			<ComboBox onChange={changeSpy}>
+				<ComboBoxItem text="Cozy1" value="c1"></ComboBoxItem>
+				<ComboBoxItem text="Cozy2" value="c2"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		// Open dropdown
+		cy.get("[ui5-combobox]")
+			.as("combo")
+			.shadow()
+			.find("[ui5-icon]")
+			.realClick();
+
+		// Select first item
+		cy.get("[ui5-cb-item]").eq(0).realClick();
+
+		// Verify change event was called with correct selectedValue
+		cy.get("@changeSpy").should("have.been.calledOnce");
+		cy.get("@combo").should("have.prop", "value", "Cozy1");
+		cy.get("@combo").should("have.prop", "selectedValue", "c1");
+	});
 });
 
 describe("Case-Insensitive Selection", () => {

packages/main/src/ComboBox.ts

@@ -1406,8 +1406,12 @@ class ComboBox extends UI5Element implements IFormInputElement {
 			this._useSelectedValue = true;
 		}
 
-		if (this._useSelectedValue) {
+		// Always set selectedValue when the item has a value property, regardless of _useSelectedValue state
+		if (item.value !== undefined) {
 			this.selectedValue = item.value;
+		} else if (this._useSelectedValue) {
+			// Only clear selectedValue if we were using it before
+			this.selectedValue = undefined;
 		}
 
 		if (!item.selected) {

packages/main/test/pages/ComboBox.html

@@ -331,6 +331,20 @@ <h3>ComboBox in Compact</h3>
 		</ui5-combobox>
 	</div>
 
+	<div class="demo-section">
+		<span>ComboBox - selectedValue</span>
+		<ui5-combobox id="selected-value-cb">
+			<ui5-cb-item text="Item 1" value="1"></ui5-cb-item>
+			<ui5-cb-item text="Item 2" value="2"></ui5-cb-item>
+			<ui5-cb-item text="Item 3" value="3"></ui5-cb-item>
+			<ui5-cb-item text="Item 4" value="4"></ui5-cb-item>
+			<ui5-cb-item text="Item 5" value="5"></ui5-cb-item>
+		</ui5-combobox>
+		<br>
+		<span>Value: <strong id="cb-value"></strong></span><br>
+		<span>Selected Value: <strong id="cb-selected-value"></strong></span><br>
+	</div>
+
 	<section>
 		<h3>ComboBox Composition</h3>
 
@@ -641,6 +655,12 @@ <h3>ComboBox Composition</h3>
 			const combo = document.getElementById("toggle-loading-cb");
 			combo.loading = !combo.loading;
 		});
+
+		document.getElementById("selected-value-cb").addEventListener("ui5-change", function (event) {
+			const combo = event.target;
+			document.getElementById("cb-value").innerHTML = combo.value || "(empty)";
+			document.getElementById("cb-selected-value").innerHTML = combo.selectedValue || "(none)";
+		});
 	</script>
 
 </body>