fix(ui5-input): emit change when suggestion is clicked (#12206)

Author: aleksandar-terziev

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

@@ -443,6 +443,78 @@ describe("Input general interaction", () => {
 		cy.get("@input")
 			.should("have.prop", "typedInValue", "");
 	});
+
+	it("Should fire 'change' event once when clicking a suggestion equal to the typed value", () => {
+		const onChange = cy.spy().as("onChange");
+		const onSelectionChange = cy.spy().as("onSelectionChange");
+
+		cy.mount(
+			<Input
+				id="input-equal-click"
+				showSuggestions
+				noTypeahead
+				onChange={onChange}
+				onSelectionChange={onSelectionChange}
+			>
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+			</Input>
+		);
+
+		cy.get("#input-equal-click")
+		.shadow()
+		.find("input")
+		.click()
+		.realType("Cozy");
+
+		cy.get("#input-equal-click")
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover]")
+		.ui5ResponsivePopoverOpened();
+
+		cy.get('#input-equal-click')
+		.find('ui5-suggestion-item[text="Cozy"]')
+		.click();
+
+		cy.get("#input-equal-click").should("have.value", "Cozy");
+		cy.get("@onChange").should("have.been.calledOnce");
+	});
+
+	it("Should fire 'change' event once when selecting a suggestion equal to the typed value with keyboard", () => {
+		const onChange = cy.spy().as("onChange");
+		const onSelectionChange = cy.spy().as("onSelectionChange");
+
+		cy.mount(
+			<Input
+				id="input-equal-keyboard"
+				showSuggestions
+				noTypeahead
+				onChange={onChange}
+				onSelectionChange={onSelectionChange}
+			>
+				<SuggestionItem text="Cozy" />
+				<SuggestionItem text="Compact" />
+			</Input>
+		);
+
+		cy.get("#input-equal-keyboard")
+		.shadow()
+		.find("input")
+		.click()
+		.realType("Cozy");
+
+		cy.get("#input-equal-keyboard")
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover]")
+		.ui5ResponsivePopoverOpened();
+
+		cy.realPress("ArrowDown");
+		cy.realPress("Enter");
+
+		cy.get("#input-equal-keyboard").should("have.value", "Cozy");
+		cy.get("@onChange").should("have.been.calledOnce");
+		cy.get("@onSelectionChange").should("have.been.calledOnce");
+	});
 });
 
 describe("Input arrow navigation", () => {

packages/main/src/Input.ts

@@ -1424,10 +1424,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 			return;
 		}
 
-		const value = this.typedInValue || this.value;
 		const itemText = item.text || "";
 		const fireChange = keyboardUsed
-			? this.valueBeforeItemSelection !== itemText : value !== itemText;
+			? this.valueBeforeItemSelection !== itemText : this.previousValue !== itemText;
 
 		this.hasSuggestionItemSelected = true;
 		this.value = itemText;