fix(ui5-combobox): fire 'change' event with normalized values

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

@@ -4274,3 +4274,95 @@ describe("ComboBoxItemCustom - Accessibility", () => {
 		cy.get("[ui5-cb-item-custom]").shadow().find("li").should("not.have.attr", "tabindex", "0");
 	});
 });
+
+describe("Newline normalization in item text", () => {
+	it("should fire change event twice when selecting two different items with newlines via keyboard", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text={"Item\nA"} value="item-a" />
+				<ComboBoxItem text={"Item\nB"} value="item-b" />
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.invoke("on", "ui5-change", cy.spy().as("changeSpy"));
+
+		cy.get("@combobox")
+			.shadow()
+			.find("[ui5-icon]")
+			.realClick();
+
+		cy.get("@combobox")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("have.attr", "open");
+
+		cy.get("@combobox").realPress("ArrowDown");
+		cy.get("@combobox").realPress("Enter");
+
+		cy.get("@changeSpy").should("have.been.calledOnce");
+
+		cy.get("@combobox")
+			.shadow()
+			.find("[ui5-icon]")
+			.realClick();
+
+		cy.get("@combobox")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("have.attr", "open");
+
+		cy.get("@combobox").realPress("ArrowDown");
+		cy.get("@combobox").realPress("ArrowDown");
+		cy.get("@combobox").realPress("Enter");
+
+		cy.get("@changeSpy").should("have.been.calledTwice");
+	});
+
+	it("should fire change event when selecting items with identical normalized display text but different values", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text={"Item\nX"} value="first" />
+				<ComboBoxItem text="Item X" value="second" />
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.invoke("on", "ui5-change", cy.spy().as("changeSpy"));
+
+		cy.get("[ui5-cb-item]").should("have.length", 2);
+
+		cy.get("@combobox")
+			.shadow()
+			.find("[ui5-icon]")
+			.realClick();
+
+		cy.get("@combobox")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("have.attr", "open");
+
+		cy.get("@combobox").realPress("ArrowDown");
+		cy.get("@combobox").realPress("Enter");
+
+		cy.get("@changeSpy").should("have.been.calledOnce");
+
+		cy.get("@combobox")
+			.shadow()
+			.find("[ui5-icon]")
+			.realClick();
+
+		cy.get("@combobox")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("have.attr", "open");
+
+		cy.get("@combobox").realPress("ArrowDown");
+		cy.get("@combobox").realPress("ArrowDown");
+		cy.get("@combobox").realPress("Enter");
+
+		cy.get("@changeSpy").should("have.been.calledTwice");
+	});
+});

packages/main/src/ComboBox.ts

@@ -519,6 +519,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	_selectionPerformed = false;
 	_selectionTrigger?: ComboBoxSelectionChangeTrigger;
 	_lastValue: string;
+	_lastSelectedValue?: string;
 	_selectedItemText = "";
 	_userTypedValue = "";
 	_useSelectedValue = false;
@@ -650,6 +651,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		if (!e.relatedTarget || (e.relatedTarget !== this.shadowRoot!.querySelector(".ui5-input-clear-icon"))) {
 			this._lastValue = this.value;
+			this._lastSelectedValue = this.selectedValue;
 		}
 
 		!isPhone() && (e.target as HTMLInputElement).setSelectionRange(0, this.value.length);
@@ -713,6 +715,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		if (this._selectionPerformed) {
 			this._lastValue = this.value;
+			this._lastSelectedValue = this.selectedValue;
 			this._selectionPerformed = false;
 		}
 
@@ -782,6 +785,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		if (isPhone() && this.value && !this._lastValue) {
 			this._lastValue = this.value;
+			this._lastSelectedValue = this.selectedValue;
 		}
 
 		this._toggleRespPopover();
@@ -1400,9 +1404,13 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_fireChangeEvent() {
-		if (this.value !== this._lastValue) {
+		const valueChanged = this.value !== this._lastValue;
+		const selectedValueChanged = this._useSelectedValue && this.selectedValue !== this._lastSelectedValue;
+
+		if (valueChanged || selectedValueChanged) {
 			this.fireDecoratorEvent("change");
 			this._lastValue = this.value;
+			this._lastSelectedValue = this.selectedValue;
 		}
 	}
 
@@ -1500,6 +1508,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		if (this._isPhone) {
 			this._lastValue = "";
+			this._lastSelectedValue = undefined;
 			this.fireDecoratorEvent("change");
 		} else {
 			this.focus();

packages/main/test/pages/ComboBox.html

@@ -890,6 +890,37 @@ <h3>ComboBox with Mixed Items</h3>
 		</ui5-combobox>
 	</div>
 
+	<div class="demo-section" style="padding: 20px; background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px;">
+		<h3>Newline Normalization Test</h3>
+		<p>Items with newlines in text that normalize to same display. Use <b>Arrow keys + Enter</b> to test.</p>
+		<ui5-combobox id="newline-test-cb" placeholder="Select via keyboard..."></ui5-combobox>
+		<br/><br/>
+		<div><b>Change events:</b> <span id="newline-change-count">0</span></div>
+		<div id="newline-log" style="margin-top: 10px; font-family: monospace; background: #fff; padding: 10px; border-radius: 4px; min-height: 60px;"></div>
+		<script>
+			(function() {
+				const cb = document.getElementById("newline-test-cb");
+				const item1 = document.createElement("ui5-cb-item");
+				item1.setAttribute("text", "Item\nX");
+				item1.setAttribute("value", "first");
+				cb.appendChild(item1);
+
+				const item2 = document.createElement("ui5-cb-item");
+				item2.setAttribute("text", "Item X");
+				item2.setAttribute("value", "second");
+				cb.appendChild(item2);
+
+				let count = 0;
+				cb.addEventListener("ui5-change", function(e) {
+					count++;
+					document.getElementById("newline-change-count").textContent = count;
+					const log = document.getElementById("newline-log");
+					log.innerHTML = `#${count}: value="${e.target.value}", selectedValue="${e.target.selectedValue}"<br>` + log.innerHTML;
+				});
+			})();
+		</script>
+	</div>
+
 </body>
 
 </html>