fix(ui5-input): fire change event properly when suggestions (#9429)

* fix(ui5-input): fire change event properly when suggestions Do not fire change event when the same suggestion item is reselected. Fixes #8912
SAP · Jul 19, 2024 · a77cd4b · a77cd4b
1 parent 04b8f47
commit a77cd4b
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 5 deletions.
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
@@ -1118,7 +1118,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	}
 
 	_handleTypeAhead(item: IInputSuggestionItemSelectable) {
-		const value = item.text ? item.text : item.textContent || "";
+		const value = item.text ? item.text : "";
 
 		this._innerValue = value;
 		this.value = value;
@@ -1219,14 +1219,14 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		}
 
 		const value = this.typedInValue || this.value;
-		const itemText = item.text || item.textContent || ""; // keep textContent for compatibility
+		const itemText = item.text || "";
 		const fireChange = keyboardUsed
 			? this.valueBeforeItemSelection !== itemText : value !== itemText;
 
 		this.hasSuggestionItemSelected = true;
+		this.value = itemText;
 
-		if (fireChange) {
-			this.value = itemText;
+		if (fireChange && (this.previousValue !== itemText)) {
 			this.valueBeforeItemSelection = itemText;
 			this.lastConfirmedValue = itemText;
 

diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
@@ -1041,7 +1041,7 @@ describe("Input general interaction", () => {
 		assert.strictEqual(await changeCount.getHTML(false), "2", "The change event is called now, since the value is updated");
 	});
 
-	it("Change event should be fired only once, when a user types a value identical to a item and presses ENTER - #3732", async () => {
+	it("Change event should be fired only once, when a user types a value identical to an item and presses ENTER - #3732", async () => {
 		const inputChange = await browser.$("#input-change-2").shadow$("input");
 		const changeCount = await browser.$("#input-change-count-2");
 
@@ -1094,6 +1094,75 @@ describe("Input general interaction", () => {
 		assert.strictEqual(await input.getValue(), "", "Input's value should be empty");
 		assert.strictEqual(await inner.getValue(), "", "Inner input's value should be empty");
 	});
+
+	it("Change event is not fired when the same suggestion item is selected (with typeahead) - #8912", async () => {
+		const suggestionsInput = await browser.$("#myInput");
+
+		await suggestionsInput.click();
+		await suggestionsInput.keys("a");
+
+		await suggestionsInput.keys("ArrowDown");
+		await suggestionsInput.keys("ArrowDown");
+		await suggestionsInput.keys("Enter");
+
+		const changeCount = await browser.$("#myInput-change-count");
+
+		// Assert
+		assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is called once");
+		assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item");
+
+		await suggestionsInput.keys("Backspace");
+
+		await suggestionsInput.keys("ArrowDown");
+		await suggestionsInput.keys("ArrowDown");
+		await suggestionsInput.keys("Enter");
+
+		assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is still called once");
+		assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item");
+	});
+
+	it("Change event is not fired when the same suggestion item is selected (no-typeahead) - #8912", async () => {
+		const suggestionsInput = await browser.$("#myInput");
+		await browser.execute(() => {
+			document.querySelector("#myInput").noTypeahead = true;
+		});
+
+		await suggestionsInput.keys("Backspace");
+
+		await suggestionsInput.keys("ArrowDown");
+		await suggestionsInput.keys("ArrowDown");
+		await suggestionsInput.keys("Enter");
+
+		const changeCount = await browser.$("#myInput-change-count");
+
+		assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is still called once");
+		assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item");
+
+		// restore the default property value
+		await browser.execute(() => {
+			document.querySelector("#myInput").noTypeahead = false;
+		});
+	});
+
+	it("Change event is not fired when the same suggestion item is selected after focus out and selecting suggestion again - #8912", async () => {
+		const suggestionsInput = await browser.$("#myInput");
+		const changeCount = await browser.$("#myInput-change-count");
+
+		assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is called once");
+		assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item");
+
+		await suggestionsInput.keys("Tab");
+
+		await suggestionsInput.click();
+		await suggestionsInput.keys("Backspace");
+		await suggestionsInput.keys("ArrowDown");
+		await suggestionsInput.keys("ArrowDown");
+		await suggestionsInput.keys("Enter");
+
+		// Assert
+		assert.strictEqual(await changeCount.getHTML(false), "1", "The change event is still called once");
+		assert.strictEqual(await suggestionsInput.getValue(), "Afghanistan", "Input's value should be the text of the selected item");
+	});
 });
 
 describe("Input arrow navigation", () => {