fix(ui5-input): fire change on the initial tab press after suggestion is selected (#3514)

* Fix change firing on the initial tab press

* Minor error fixes

* Code refactoring

* Minor linting fix

* Retrigger tests

* Fix firing of change after shift+tab is used for focus inwq

* Retrigger tests

* Retrigger tests

* Avoid double firing of the change event

* Add test

Author: ndeshev

packages/main/src/Input.js

@@ -12,6 +12,7 @@ import {
 	isEnter,
 	isBackSpace,
 	isEscape,
+	isTabNext,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -505,6 +506,9 @@ class Input extends UI5Element {
 		// Indicates if the user selection has been canceled with [ESC].
 		this.suggestionSelectionCanceled = false;
 
+		// Indicates if the change event has already been fired
+		this._changeFired = false;
+
 		// tracks the value between focus in and focus out to detect that change event should be fired.
 		this.previousValue = undefined;
 
@@ -594,6 +598,10 @@ class Input extends UI5Element {
 			return this._handleSpace(event);
 		}
 
+		if (isTabNext(event)) {
+			return this._handleTab(event);
+		}
+
 		if (isEnter(event)) {
 			return this._handleEnter(event);
 		}
@@ -638,6 +646,12 @@ class Input extends UI5Element {
 		}
 	}
 
+	_handleTab(event) {
+		if (this.Suggestions && (this.previousValue !== this.value)) {
+			this.Suggestions.onTab(event);
+		}
+	}
+
 	_handleEnter(event) {
 		const itemPressed = !!(this.Suggestions && this.Suggestions.onEnter(event));
 		if (!itemPressed) {
@@ -697,7 +711,12 @@ class Input extends UI5Element {
 	}
 
 	_handleChange(event) {
-		this.fireEvent(this.EVENT_CHANGE);
+		if (!this._changeFired) {
+			this.fireEvent(this.EVENT_CHANGE);
+		}
+
+		// Set event as no longer marked
+		this._changeFired = false;
 	}
 
 	_scroll(event) {
@@ -866,6 +885,9 @@ class Input extends UI5Element {
 			this.valueBeforeItemSelection = itemText;
 			this.fireEvent(this.EVENT_INPUT);
 			this.fireEvent(this.EVENT_CHANGE);
+
+			// Mark the change event to avoid double firing
+			this._changeFired = true;
 		}
 
 		this.valueBeforeItemPreview = "";

packages/main/src/features/InputSuggestions.js

@@ -104,6 +104,14 @@ class Suggestions {
 		return false;
 	}
 
+	onTab(event) {
+		if (this._isItemOnTarget()) {
+			this.onItemSelected(null, true);
+			return true;
+		}
+		return false;
+	}
+
 	toggle(bToggle, { preventFocusRestore }) {
 		const toggle = bToggle !== undefined ? bToggle : !this.isOpened();
 

packages/main/test/pages/Input.html

@@ -128,11 +128,19 @@ <h3> Test 'input' event</h3>
 	<h3> 'input' test result</h3>
 	<ui5-input id="inputLiveChangeResult"></ui5-input>
 
+	<h3> Input test change with suggestions</h3>
+	<ui5-input id="inputChange-Suggestions" show-suggestions>
+		<ui5-icon slot="icon" name="message-warning"></ui5-icon>
+		<ui5-suggestion-item text="Project"></ui5-suggestion-item>
+		<ui5-suggestion-item text="Fellowship"></ui5-suggestion-item>
+		<ui5-suggestion-item text="Vocational Training"></ui5-suggestion-item>
+	</ui5-input>
+
 	<h3> Input test change</h3>
-	<ui5-input id="inputChange">	</ui5-input>
-	<h3> Input test change result</h3>
-	<ui5-input id="inputChangeResult"></ui5-input>
+	<ui5-input id="inputChange"></ui5-input>
 
+	<h3> Input test change result</h3>
+	<ui5-input id="inputChangeResult"></ui5-input>	
 	<h3>Input test ESC</h3>
 	<ui5-input id="myInputEsc" show-suggestions style="width: 100%">
 		<ui5-suggestion-item text="Chromium"></ui5-suggestion-item>
@@ -360,6 +368,7 @@ <h3>Test Backspace</h3>
 		var sap_database_entries = [{ key: "A", text: "A" }, { key: "Afg", text: "Afghanistan" }, { key: "Arg", text: "Argentina" }, { key: "Alb", text: "Albania" }, { key: "Arm", text: "Armenia" }, { key: "Alg", text: "Algeria" }, { key: "And", text: "Andorra" }, { key: "Ang", text: "Angola" }, { key: "Ast", text: "Austria" }, { key: "Aus", text: "Australia" }, { key: "Aze", text: "Azerbaijan" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "B", text: "B" }, { key: "Bel", text: "Belarus" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }, { key: "C", text: "C" }, { key: "Ch", text: "China" }, { key: "Cub", text: "Cuba" }, { key: "Chil", text: "Chili" }, { key: "L", text: "L" }, { key: "Lat", text: "Latvia" }, { key: "Lit", text: "Litva" }, { key: "P", text: "P" }, { key: "Prt", text: "Portugal" }, { key: "S", text: "S" }, { key: "Sen", text: "Senegal" }, { key: "Ser", text: "Serbia" }, { key: "Sey", text: "Seychelles" }, { key: "Sierra", text: "Sierra Leone" }, { key: "Sgp", text: "Singapore" }, { key: "Sint", text: "Sint Maarten" }, { key: "Slv", text: "Slovakia" }, { key: "Slo", text: "Slovenia" }];
 
 		var input = document.getElementById('myInput');
+		var inputChangeWithSuggestions = document.getElementById('inputChange-Suggestions');
 		var inputGrouping = document.getElementById('myInputGrouping');
 		var myInput2 = document.getElementById('myInput2');
 		var inputError = document.getElementById("inputError");
@@ -460,6 +469,11 @@ <h3>Test Backspace</h3>
 			inputChangeResult.value = ++inputChangeResultCounter;
 		});
 
+		inputChangeWithSuggestions.addEventListener("ui5-change", function (event) {
+			inputChangeResult.value = ++inputChangeResultCounter;
+		});
+
+
 		scrollInput.addEventListener("ui5-suggestion-scroll", function (event) {
 			scrollResult.value = event.detail.scrollTop;
 			console.log("scroll", { scrolltop: event.detail.scrollTop, container: event.detail.scrollContainer });

packages/main/test/specs/Input.spec.js

@@ -98,7 +98,37 @@ describe("Input general interaction", () => {
 		assert.strictEqual(inputResult.getValue(), "2", "change is called twice");
 	});
 
+	it("fires change on tab", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/Input.html`);
+
+		const input = $("#inputChange-Suggestions").shadow$("input");
+		const inputResult = $("#inputChangeResult").shadow$("input");
+
+		input.click();
+		input.keys("ArrowDown");
+		input.keys("Tab");
+
+		assert.strictEqual(inputResult.getValue(), "1", "change is called twice");
+	});
+
+	it("fires change only once when there was already a value on focus in", () => {
+		const input = $("#inputChange-Suggestions").shadow$("input");
+		const inputResult = $("#inputChangeResult").shadow$("input");
+		browser.keys(["Shift", "Tab"]);
+		input.keys("Backspace");
+
+		input.keys("ArrowDown");
+		input.keys("ArrowDown");
+
+
+		input.keys("Tab");
+
+		assert.strictEqual(inputResult.getValue(), "2", "change is called once");
+	});
+
 	it("fires input", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/Input.html`);
+
 		const input2 = $("#input2").shadow$("input");
 		const inputLiveChangeResult = $("#inputLiveChangeResult").shadow$("input");