fix: review feedback

Author: MapTo0

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

@@ -3299,4 +3299,40 @@ describe("SelectedValue API", () => {
 				expect(comboBox.formFormattedValue).to.equal("Germany");
 			});
 	});
+
+	it("should populate input value from selectedValue on initial render", () => {
+		cy.mount(
+			<ComboBox selectedValue="DE">
+				<ComboBoxItem text="Austria" value="AT"></ComboBoxItem>
+				<ComboBoxItem text="Germany" value="DE"></ComboBoxItem>
+				<ComboBoxItem text="France" value="FR"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.should("have.prop", "value", "Germany")
+			.should("have.prop", "selectedValue", "DE");
+
+		cy.get("[ui5-cb-item]").eq(1)
+			.should("have.prop", "selected", true);
+	});
+
+	it("should select correct item by selectedValue when multiple items have same text", () => {
+		cy.mount(
+			<ComboBox selectedValue="emp-205">
+				<ComboBoxItem text="John Smith" additionalText="Sales" value="emp-101"></ComboBoxItem>
+				<ComboBoxItem text="John Smith" additionalText="Engineering" value="emp-205"></ComboBoxItem>
+				<ComboBoxItem text="John Smith" additionalText="Marketing" value="emp-342"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.should("have.prop", "value", "John Smith")
+			.should("have.prop", "selectedValue", "emp-205");
+
+		// The second item (Engineering) should be selected, not the first
+		cy.get("[ui5-cb-item]").eq(0).should("have.prop", "selected", false);
+		cy.get("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
+		cy.get("[ui5-cb-item]").eq(2).should("have.prop", "selected", false);
+	});
 });

packages/main/src/ComboBox.ts

@@ -477,7 +477,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	_lastValue: string;
 	_selectedItemText = "";
 	_userTypedValue = "";
-	_useSelectedValue: boolean = false;
+	_useSelectedValue = false;
 	_valueStateLinks: Array<HTMLElement> = [];
 	_composition?: InputComposition;
 	@i18n("@ui5/webcomponents")
@@ -875,7 +875,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		if (this.open) {
 			this._itemFocused = true;
 			this.value = isGroupItem ? "" : currentItem.text!;
-			this.selectedValue = isGroupItem ? "" : currentItem?.value;
+			this.selectedValue = isGroupItem ? undefined : currentItem.value;
 			this.focused = false;
 
 			currentItem.focused = true;
@@ -1246,20 +1246,25 @@ class ComboBox extends UI5Element implements IFormInputElement {
 			if (!shouldSelectionBeCleared && !itemToBeSelected) {
 				if (isInstanceOfComboBoxItemGroup(item)) {
 					if (this._useSelectedValue) {
-						itemToBeSelected = item.items.find(i => i.value === valueToMatch && this.value === i.text);
+						itemToBeSelected = item.items.find(i => i.value === valueToMatch && (this.value === "" || this.value === i.text));
 					} else {
 						itemToBeSelected = item.items?.find(i => i.text === this.value);
 					}
 				} else {
 					if (this._useSelectedValue) {
-						itemToBeSelected = this.items.find(i => i.value === valueToMatch && this.value === i.text);
+						itemToBeSelected = this.items.find(i => i.value === valueToMatch && (this.value === "" || this.value === i.text));
 						return;
 					}
 					itemToBeSelected = item.text === this.value ? item : undefined;
 				}
 			}
 		});
 
+		// When selectedValue matched an item but value is empty (initial render), populate value from the item's text
+		if (itemToBeSelected && this._initialRendering && this.value === "") {
+			this.value = itemToBeSelected.text || "";
+		}
+
 		this._filteredItems = this._filteredItems.map(item => {
 			if (!isInstanceOfComboBoxItemGroup(item)) {
 				item.selected = item === itemToBeSelected;

packages/main/test/pages/ComboBox.html

@@ -27,7 +27,7 @@
 
 	<div class="demo-section">
 		<ui5-label id="countryLabel">Select country: </ui5-label>
-		<ui5-combobox id="combo" class="combobox2auto" accessible-name-ref="countryLabel">
+		<ui5-combobox id="combo" class="combobox2auto" value="Bulgaria" accessible-name-ref="countryLabel">
 			<ui5-cb-item text="Algeria"></ui5-cb-item>
 			<ui5-cb-item text="Argentina"></ui5-cb-item>
 			<ui5-cb-item text="Australia"></ui5-cb-item>