fix(ui5-input): Fix value reset on ESC (#3886)

Now the component is synced with the desired by specifications behavior.
If the suggestions popover is opened: ESC closes it.
If the suggestions are not opened: ESC resets the value to the last confirmed by the user with 'ENTER' or if there isn't one - with the initial value of the component when focused by the user.

Fixes #3784
Closes #3784

Author: ndeshev

packages/main/src/Input.js

@@ -518,6 +518,9 @@ class Input extends UI5Element {
 		// The value that should be highlited.
 		this.highlightValue = "";
 
+		// The last value confirmed by the user with "ENTER"
+		this.lastConfirmedValue = "";
+
 		// Indicates, if the user pressed the BACKSPACE key.
 		this._backspaceKeyDown = false;
 
@@ -656,6 +659,7 @@ class Input extends UI5Element {
 		const itemPressed = !!(this.Suggestions && this.Suggestions.onEnter(event));
 		if (!itemPressed) {
 			this.fireEventByAction(this.ACTION_ENTER);
+			this.lastConfirmedValue = this.value;
 		}
 	}
 
@@ -667,6 +671,10 @@ class Input extends UI5Element {
 			// Mark that the selection has been canceled, so the popover can close
 			// and not reopen, due to receiving focus.
 			this.suggestionSelectionCanceled = true;
+		} else if (this.Suggestions && this.Suggestions.isOpened()) {
+			this.closePopover();
+		} else {
+			this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
 		}
 	}
 
@@ -700,6 +708,7 @@ class Input extends UI5Element {
 		this.closePopover();
 
 		this.previousValue = "";
+		this.lastConfirmedValue = "";
 		this.focused = false; // invalidating property
 	}
 
@@ -883,6 +892,7 @@ class Input extends UI5Element {
 		if (fireInput) {
 			this.value = itemText;
 			this.valueBeforeItemSelection = itemText;
+			this.lastConfirmedValue = itemText;
 			this.fireEvent(this.EVENT_INPUT);
 			this.fireEvent(this.EVENT_CHANGE);
 

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

@@ -325,6 +325,33 @@ describe("Input general interaction", () => {
 			"The value is restored as ESC has been pressed.");
 	});
 
+	it("input value should be cleared with ESC", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/Input.html`);
+
+		const suggestionsInput = $("#myInputEsc").shadow$("input");
+
+		suggestionsInput.click();
+		suggestionsInput.keys("Some value");
+
+		// Close sugggestions
+		suggestionsInput.keys("Escape");
+		// Clear value
+		suggestionsInput.keys("Escape");
+
+		assert.strictEqual(suggestionsInput.getValue(), "", "The value is restored as ESC has been pressed.");
+
+		suggestionsInput.keys("Some value");
+		suggestionsInput.keys("Enter");
+		suggestionsInput.keys("Another value");
+
+		// Close sugggestions
+		suggestionsInput.keys("Escape");
+		// Clear value
+		suggestionsInput.keys("Escape");
+
+		assert.strictEqual(suggestionsInput.getValue(), "Some value", "The value is restored to the last confirmed by 'ENTER' press one.");
+	});
+
 	it("handles group suggestion item via keyboard", () => {
 		const suggestionsInput = $("#myInputGrouping").shadow$("input");
 		const inputResult = $("#inputResultGrouping").shadow$("input");