@ui5/webcomponents 0.0.0-cf069fb29 → 0.0.0-cf50976ce

package/src/Input.js

@@ -1,7 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { isIE, isPhone, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
+import {
+	isPhone,
+	isSafari,
+	isAndroid,
+} from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import {
@@ -22,19 +26,30 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/not-editable.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 import InputType from "./types/InputType.js";
 import Popover from "./Popover.js";
+import Icon from "./Icon.js";
 // Templates
 import InputTemplate from "./generated/templates/InputTemplate.lit.js";
 import InputPopoverTemplate from "./generated/templates/InputPopoverTemplate.lit.js";
+import * as Filters from "./Filters.js";
 
 import {
 	VALUE_STATE_SUCCESS,
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS,
 	INPUT_SUGGESTIONS_TITLE,
 	INPUT_SUGGESTIONS_ONE_HIT,
@@ -48,8 +63,6 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
-const rgxFloat = new RegExp(/(\+|-)?\d+(\.|,)\d+/);
-
 /**
  * @public
  */
@@ -139,7 +152,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Input.prototype */  {
+	properties: /** @lends sap.ui.webcomponents.main.Input.prototype */  {
 
 		/**
 		 * Defines whether the component is in disabled state.
@@ -206,6 +219,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the value will be autcompleted to match an item
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.4.0
+		 */
+		noTypeahead: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines the HTML type of the component.
 		 * Available options are: <code>Text</code>, <code>Email</code>,
@@ -241,6 +266,20 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the inner stored value of the component.
+		 * <br><br>
+		 * <b>Note:</b> The property is updated upon typing. In some special cases the old value is kept (e.g. deleting the value after the dot in a float)
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 */
+		_innerValue: {
+			type: String,
+			noAttribute: true,
+		},
+
 		/**
 		 * Defines the value state of the component.
 		 * <br><br>
@@ -297,7 +336,8 @@ const metadata = {
 
 		/**
 		 * Sets the maximum number of characters available in the input field.
-		 *
+		 * <br><br>
+		 * <b>Note:</b> This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.
 		 * @type {Integer}
 		 * @since 1.0.0-rc.5
 		 * @public
@@ -307,9 +347,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -320,7 +360,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the input.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -331,17 +371,37 @@ const metadata = {
 		},
 
 		/**
+		 * Defines whether the clear icon of the input will be shown.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.2.0
+		 */
+		showClearIcon: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the clear icon is visible.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
 		 * @private
+		 * @since 1.2.0
 		 */
-		focused: {
+		effectiveShowClearIcon: {
 			type: Boolean,
 		},
 
 		/**
-		 * Indicates whether the visual focus is on the value state header
 		 * @private
 		 */
-		_isValueStateFocused: {
+		focused: {
+			type: Boolean,
+		},
+
+		openOnMobile: {
 			type: Boolean,
 		},
 
@@ -349,6 +409,22 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Determines whether to manually show the suggestions popover
+		 * @private
+		 */
+		_forceOpen: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates whether the visual focus is on the value state header
+		 * @private
+		 */
+		_isValueStateFocused: {
+			type: Boolean,
+		},
+
 		_input: {
 			type: Object,
 		},
@@ -379,7 +455,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Input.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.Input.prototype */ {
 		/**
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
 		 *
@@ -470,7 +546,6 @@ const metadata = {
  * <br>
  *
  * <ul>
- * <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Opens value help if available, same as clicking the value help icon. (Does not open suggestion list.)</li>
  * <li>[ESC] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.</li>
  * <li>[ENTER] or [RETURN] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.</li>
  * <li>[DOWN] - Focuses the next matching item in the suggestion list.</li>
@@ -540,9 +615,6 @@ 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._changeFiredValue = null;
-
 		// tracks the value between focus in and focus out to detect that change event should be fired.
 		this.previousValue = undefined;
 
@@ -555,8 +627,11 @@ class Input extends UI5Element {
 		// The last value confirmed by the user with "ENTER"
 		this.lastConfirmedValue = "";
 
-		// Indicates, if the user pressed the BACKSPACE key.
-		this._backspaceKeyDown = false;
+		// The value that the user is typed in the input
+		this.valueBeforeAutoComplete = "";
+
+		// Indicates, if the user is typing. Gets reset once popup is closed
+		this.isTyping = false;
 
 		// all sementic events
 		this.EVENT_CHANGE = "change";
@@ -571,6 +646,8 @@ class Input extends UI5Element {
 		this.suggestionsTexts = [];
 
 		this._handleResizeBound = this._handleResize.bind(this);
+
+		this._keepInnerValue = false;
 	}
 
 	onEnterDOM() {
@@ -582,24 +659,58 @@ class Input extends UI5Element {
 	}
 
 	onBeforeRendering() {
+		if (!this._keepInnerValue) {
+			this._innerValue = this.value;
+		}
+
 		if (this.showSuggestions) {
 			this.enableSuggestions();
 			this.suggestionsTexts = this.Suggestions.defaultSlotProperties(this.highlightValue);
 		}
 
-		this.open = this.open && (!!this.suggestionItems.length || this._isPhone);
+		this.effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
+
+		this.FormSupport = getFeature("FormSupport");
+		const hasItems = this.suggestionItems.length;
+		const hasValue = !!this.value;
+		const isFocused = this.shadowRoot.querySelector("input") === getActiveElement();
 
-		const FormSupport = getFeature("FormSupport");
+		if (this._isPhone) {
+			this.open = this.openOnMobile;
+		} else if (this._forceOpen) {
+			this.open = true;
+		} else {
+			this.open = hasValue && hasItems && isFocused && this.isTyping;
+		}
 
-		if (FormSupport) {
-			FormSupport.syncNativeHiddenInput(this);
+		if (this.FormSupport) {
+			this.FormSupport.syncNativeHiddenInput(this);
 		} else if (this.name) {
 			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
+
+		const value = this.value;
+		const innerInput = this.getInputDOMRefSync();
+
+		if (!innerInput || !value) {
+			return;
+		}
+
+		const autoCompletedChars = innerInput.selectionEnd - innerInput.selectionStart;
+
+		// Typehead causes issues on Android devices, so we disable it for now
+		// If there is already a selection the autocomplete has already been performed
+		if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars && !this._isKeyNavigation) {
+			const item = this._getFirstMatchingItem(value);
+
+			// Keep the original typed in text intact
+			this.valueBeforeAutoComplete += value.slice(this.valueBeforeAutoComplete.length, value.length);
+			this._handleTypeAhead(item, value);
+		}
 	}
 
 	async onAfterRendering() {
-		if (this.Suggestions) {
+		if (this.Suggestions && this.showSuggestions) {
 			this.Suggestions.toggle(this.open, {
 				preventFocusRestore: true,
 			});
@@ -615,6 +726,9 @@ class Input extends UI5Element {
 	}
 
 	_onkeydown(event) {
+		this._isKeyNavigation = true;
+		this._shouldAutocomplete = !this.noTypeahead && !(isBackSpace(event) || isDelete(event) || isEscape(event));
+
 		if (isUp(event)) {
 			return this._handleUp(event);
 		}
@@ -656,7 +770,6 @@ class Input extends UI5Element {
 		}
 
 		if (isBackSpace(event)) {
-			this._backspaceKeyDown = true;
 			this._selectedText = window.getSelection().toString();
 		}
 
@@ -665,16 +778,17 @@ class Input extends UI5Element {
 		}
 
 		this._keyDown = true;
+		this._isKeyNavigation = false;
 	}
 
 	_onkeyup(event) {
-		// The native Delete event does not update the value property "on time". So, the (native) change event is always fired with the old value
+		// The native Delete event does not update the value property "on time".
+		// So, the (native) change event is always fired with the old value
 		if (isDelete(event)) {
 			this.value = event.target.value;
 		}
 
 		this._keyDown = false;
-		this._backspaceKeyDown = false;
 	}
 
 	/* Event handling */
@@ -704,10 +818,33 @@ class Input extends UI5Element {
 
 	_handleEnter(event) {
 		const itemPressed = !!(this.Suggestions && this.Suggestions.onEnter(event));
+		const innerInput = this.getInputDOMRefSync();
+		// Check for autocompleted item
+		const matchingItem = this.suggestionItems.find(item => {
+			return (item.text && item.text === this.value) || (item.textContent === this.value);
+		});
+
+		if (matchingItem) {
+			const itemText = matchingItem.text ? matchingItem.text : matchingItem.textContent;
+
+			this.getInputDOMRefSync().setSelectionRange(itemText.length, itemText.length);
+			if (!itemPressed) {
+				this.selectSuggestion(matchingItem, true);
+				this.open = false;
+			}
+		}
+
+		if (this._isPhone && !this.suggestionItems.length) {
+			innerInput.setSelectionRange(this.value.length, this.value.length);
+		}
 
 		if (!itemPressed) {
-			this.fireEventByAction(this.ACTION_ENTER);
 			this.lastConfirmedValue = this.value;
+
+			if (this.FormSupport) {
+				this.FormSupport.triggerFormSubmit(this);
+			}
+
 			return;
 		}
 
@@ -745,6 +882,10 @@ class Input extends UI5Element {
 	_handleEscape() {
 		const hasSuggestions = this.showSuggestions && !!this.Suggestions;
 		const isOpen = hasSuggestions && this.open;
+		const innerInput = this.getInputDOMRefSync();
+		const isAutoCompleted = innerInput.selectionEnd - innerInput.selectionStart > 0;
+
+		this.isTyping = false;
 
 		if (!isOpen) {
 			this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
@@ -753,25 +894,30 @@ class Input extends UI5Element {
 
 		if (hasSuggestions && isOpen && this.Suggestions._isItemOnTarget()) {
 			// Restore the value.
-			this.value = this.valueBeforeItemPreview;
+			this.value = this.valueBeforeAutoComplete || this.valueBeforeItemPreview;
 
 			// Mark that the selection has been canceled, so the popover can close
 			// and not reopen, due to receiving focus.
 			this.suggestionSelectionCanceled = true;
 			this.focused = true;
+
+			return;
+		}
+
+		if (isAutoCompleted) {
+			this.value = this.valueBeforeAutoComplete;
 		}
 
 		if (this._isValueStateFocused) {
 			this._isValueStateFocused = false;
 			this.focused = true;
 		}
-
-		this.open = false;
 	}
 
 	async _onfocusin(event) {
 		await this.getInputDOMRef();
 
+		this.valueBeforeAutoComplete = "";
 		this.focused = true; // invalidating property
 		this.previousValue = this.value;
 		this.valueBeforeItemPreview = this.value;
@@ -783,6 +929,13 @@ class Input extends UI5Element {
 		const focusedOutToSuggestions = this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover);
 		const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
 
+		this._keepInnerValue = false;
+
+		if (this.showClearIcon && !this.effectiveShowClearIcon) {
+			this._clearIconClicked = false;
+			this._handleChange();
+		}
+
 		// if focusout is triggered by pressing on suggestion item or value state message popover, skip invalidation, because re-rendering
 		// will happen before "itemPress" event, which will make item "active" state not visualized
 		if (focusedOutToSuggestions || focusedOutToValueStateMessage) {
@@ -796,13 +949,14 @@ class Input extends UI5Element {
 			return;
 		}
 
-		this.closePopover();
+		this.open = false;
 		this._clearPopoverFocusAndSelection();
 
 		this.previousValue = "";
 		this.lastConfirmedValue = "";
 		this.focused = false; // invalidating property
-		this.open = false;
+		this.isTyping = false;
+		this._forceOpen = false;
 	}
 
 	_clearPopoverFocusAndSelection() {
@@ -820,24 +974,34 @@ class Input extends UI5Element {
 	_click(event) {
 		if (isPhone() && !this.readonly && this.Suggestions) {
 			this.blur();
-			this.open = true;
+			this.openOnMobile = true;
 		}
 	}
 
-	_handleNativeInputChange() {
-		// The native change sometimes fires too early and getting input's value in the listener would return
-		// the previous value instead of the most recent one. This would make things consistent.
-		clearTimeout(this._nativeChangeDebounce);
-		this._nativeChangeDebounce = setTimeout(() => this._handleChange(), 100);
-	}
-
 	_handleChange() {
-		if (this._changeFiredValue !== this.value) {
-			this._changeFiredValue = this.value;
+		if (this._clearIconClicked) {
+			this._clearIconClicked = false;
+			return;
+		}
+
+		if (this.previousValue !== this.getInputDOMRefSync().value) {
+			this.previousValue = this.getInputDOMRefSync().value;
 			this.fireEvent(this.EVENT_CHANGE);
 		}
 	}
 
+	_clear() {
+		this.value = "";
+		this.fireEvent(this.EVENT_INPUT);
+		if (!this._isPhone) {
+			this.focus();
+		}
+	}
+
+	_iconMouseDown() {
+		this._clearIconClicked = true;
+	}
+
 	_scroll(event) {
 		const detail = event.detail;
 		this.fireEvent("suggestion-scroll", {
@@ -849,42 +1013,44 @@ class Input extends UI5Element {
 	_handleInput(event) {
 		const inputDomRef = this.getInputDOMRefSync();
 		const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
+		const eventType = event.inputType || (event.detail && event.detail.inputType);
+		this._keepInnerValue = false;
 
+		this._shouldAutocomplete = eventType !== "deleteContentBackward" && !this.noTypeahead;
 		this.suggestionSelectionCanceled = false;
 
-		if (emptyValueFiredOnNumberInput && !this._backspaceKeyDown) {
-			// For input with type="Number", if the delimiter is entered second time,
-			// the inner input is firing event with empty value
-			return;
-		}
-
-		if (emptyValueFiredOnNumberInput && this._backspaceKeyDown) {
-			// Issue: when the user removes the character(s) after the delimeter of numeric Input,
-			// the native input is firing event with an empty value and we have to manually handle this case,
-			// otherwise the entire input will be cleared as we sync the "value".
-
-			// There are tree scenarios:
-			// Example: type "123.4" and press BACKSPACE - the native input is firing event with empty value.
-			// Example: type "123.456", select/mark "456" and press BACKSPACE - the native input is firing event with empty value.
-			// Example: type "123.456", select/mark "123.456" and press BACKSPACE - the native input is firing event with empty value,
-			// but this time that's really the case.
-
-			// Perform manual handling in case of floating number
-			// and if the user did not select the entire input value
-			if (rgxFloat.test(this.value) && this._selectedText !== this.value) {
-				const newValue = this.removeFractionalPart(this.value);
-
-				// update state
-				this.value = newValue;
-				this.highlightValue = newValue;
-				this.valueBeforeItemPreview = newValue;
-
-				// fire events
-				this.fireEvent(this.EVENT_INPUT);
-				this.fireEvent("value-changed");
-				return;
-			}
+		// ---- Special cases of numeric Input ----
+		// ---------------- Start -----------------
+
+		// When the last character after the delimiter is removed.
+		// In such cases, we want to skip the re-rendering of the
+		// component as this leads to cursor repositioning and causes user experience issues.
+
+		// There are few scenarios:
+		// Example: type "123.4" and press BACKSPACE - the native input is firing event with the whole part as value (123).
+		// Pressing BACKSPACE again will remove the delimiter and the native input will fire event with the whole part as value again (123).
+		// Example: type "123.456", select/mark "456" and press BACKSPACE - the native input is firing event with the whole part as value (123).
+		// Example: type "123.456", select/mark "123.456" and press BACKSPACE - the native input is firing event with empty value.
+		const delimiterCase = this.isTypeNumber
+			&& (event.inputType === "deleteContentForward" || event.inputType === "deleteContentBackward")
+			&& !event.target.value.includes(".")
+			&& this.value.includes(".");
+
+		// Handle special numeric notation with "e", example "12.5e12"
+		const eNotationCase = emptyValueFiredOnNumberInput && event.data === "e";
+
+		// Handle special numeric notation with "-", example "-3"
+		// When pressing BACKSPACE, the native input fires event with empty value
+		const minusRemovalCase = emptyValueFiredOnNumberInput
+			&& this.value.startsWith("-")
+			&& this.value.length === 2
+			&& (event.inputType === "deleteContentForward" || event.inputType === "deleteContentBackward");
+
+		if (delimiterCase || eNotationCase || minusRemovalCase) {
+			this.value = event.target.value;
+			this._keepInnerValue = true;
 		}
+		// ----------------- End ------------------
 
 		if (event.target === inputDomRef) {
 			this.focused = true;
@@ -893,26 +1059,55 @@ class Input extends UI5Element {
 			event.stopImmediatePropagation();
 		}
 
-		/* skip calling change event when an input with a placeholder is focused on IE
-			- value of the host and the internal input should be differnt in case of actual input
-			- input is called when a key is pressed => keyup should not be called yet
-		*/
-		const skipFiring = (inputDomRef.value === this.value) && isIE() && !this._keyDown && !!this.placeholder;
-
-		!skipFiring && this.fireEventByAction(this.ACTION_USER_INPUT);
+		this.fireEventByAction(this.ACTION_USER_INPUT, event);
 
 		this.hasSuggestionItemSelected = false;
 		this._isValueStateFocused = false;
 
 		if (this.Suggestions) {
 			this.Suggestions.updateSelectedItemPosition(null);
+		}
 
-			if (!this._isPhone) {
-				this.open = !!inputDomRef.value;
-			}
+		this.isTyping = true;
+	}
+
+	_startsWithMatchingItems(str) {
+		const textProp = this.suggestionItems[0].text ? "text" : "textContent";
+		return Filters.StartsWith(str, this.suggestionItems, textProp);
+	}
+
+	_getFirstMatchingItem(current) {
+		if (!this.suggestionItems.length) {
+			return;
+		}
+
+		const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.groupItem);
+
+		if (matchingItems.length) {
+			return matchingItems[0];
 		}
 	}
 
+	_handleTypeAhead(item, filterValue) {
+		if (!item) {
+			return;
+		}
+
+		const value = item.text ? item.text : item.textContent || "";
+		const innerInput = this.getInputDOMRefSync();
+
+		filterValue = filterValue || "";
+		this._innerValue = value;
+		this.value = value;
+
+		innerInput.value = value;
+		setTimeout(() => {
+			innerInput.setSelectionRange(filterValue.length, value.length);
+		}, 0);
+
+		this._shouldAutocomplete = false;
+	}
+
 	_handleResize() {
 		this._inputWidth = this.offsetWidth;
 	}
@@ -936,6 +1131,10 @@ class Input extends UI5Element {
 			this.blur();
 			this.focused = false;
 		}
+
+		this.openOnMobile = false;
+		this.open = false;
+		this._forceOpen = false;
 	}
 
 	/**
@@ -966,6 +1165,19 @@ class Input extends UI5Element {
 		return staticAreaItem && staticAreaItem.querySelector("[ui5-popover]");
 	}
 
+	/**
+	 * Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open.
+	 * @since 1.3.0
+	 * @public
+	 */
+	openPicker() {
+		if (!this.suggestionItems.length || this.disabled || this.readonly) {
+			return;
+		}
+
+		this._forceOpen = true;
+	}
+
 	enableSuggestions() {
 		if (this.Suggestions) {
 			return;
@@ -985,9 +1197,11 @@ class Input extends UI5Element {
 			return;
 		}
 
+		const innerInput = this.getInputDOMRefSync();
+		const value = this.valueBeforeAutoComplete || this.value;
 		const itemText = item.text || item.textContent; // keep textContent for compatibility
 		const fireInput = keyboardUsed
-			? this.valueBeforeItemSelection !== itemText : this.value !== itemText;
+			? this.valueBeforeItemSelection !== itemText : value !== itemText;
 
 		this.hasSuggestionItemSelected = true;
 
@@ -995,14 +1209,20 @@ class Input extends UI5Element {
 			this.value = itemText;
 			this.valueBeforeItemSelection = itemText;
 			this.lastConfirmedValue = itemText;
+			this.getInputDOMRefSync().value = itemText;
 			this.fireEvent(this.EVENT_INPUT);
 			this._handleChange();
+			innerInput.setSelectionRange(this.value.length, this.value.length);
 		}
 
 		this.valueBeforeItemPreview = "";
 		this.suggestionSelectionCanceled = false;
 
 		this.fireEvent(this.EVENT_SUGGESTION_ITEM_SELECT, { item });
+
+		this.isTyping = false;
+		this.openOnMobile = false;
+		this._forceOpen = false;
 	}
 
 	previewSuggestion(item) {
@@ -1018,8 +1238,12 @@ class Input extends UI5Element {
 	 */
 	updateValueOnPreview(item) {
 		const noPreview = item.type === "Inactive" || item.group;
+		const innerInput = this.getInputDOMRefSync();
 		const itemValue = noPreview ? this.valueBeforeItemPreview : (item.effectiveTitle || item.textContent);
+
 		this.value = itemValue;
+		innerInput.value = itemValue;
+		innerInput.setSelectionRange(this.valueBeforeAutoComplete.length, this.value.length);
 	}
 
 	/**
@@ -1036,9 +1260,7 @@ class Input extends UI5Element {
 		return this.getSuggestionByListItem(this._previewItem);
 	}
 
-	async fireEventByAction(action) {
-		await this.getInputDOMRef();
-
+	async fireEventByAction(action, event) {
 		if (this.disabled || this.readonly) {
 			return;
 		}
@@ -1062,16 +1284,9 @@ class Input extends UI5Element {
 		}
 
 		if (isUserInput) { // input
-			this.fireEvent(this.EVENT_INPUT);
+			this.fireEvent(this.EVENT_INPUT, { inputType: event.inputType });
 			// Angular two way data binding
 			this.fireEvent("value-changed");
-			return;
-		}
-
-		// In IE, pressing the ENTER does not fire change
-		const valueChanged = (this.previousValue !== undefined) && (this.previousValue !== this.value);
-		if (isIE() && action === this.ACTION_ENTER && valueChanged) {
-			this._handleChange();
 		}
 	}
 
@@ -1094,8 +1309,8 @@ class Input extends UI5Element {
 	}
 
 	getInputDOMRefSync() {
-		if (isPhone() && this.Suggestions) {
-			return this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
+		if (isPhone() && this.Suggestions && this.Suggestions.responsivePopover) {
+			return this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone").shadowRoot.querySelector("input");
 		}
 
 		return this.nativeInput;
@@ -1181,6 +1396,15 @@ class Input extends UI5Element {
 
 	onClose() {}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": Input.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": Input.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": Input.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": Input.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	valueStateTextMappings() {
 		return {
 			"Success": Input.i18nBundle.getText(VALUE_STATE_SUCCESS),
@@ -1254,15 +1478,15 @@ class Input extends UI5Element {
 	}
 
 	get ariaValueStateHiddenText() {
-		if (!this.hasValueStateMessage) {
+		if (!this.hasValueState) {
 			return;
 		}
 
 		if (this.shouldDisplayDefaultValueStateMessage) {
-			return this.valueStateText;
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateText}`;
 		}
 
-		return this.valueStateMessageText.map(el => el.textContent).join(" ");
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
 	}
 
 	get itemSelectionAnnounce() {
@@ -1439,7 +1663,7 @@ class Input extends UI5Element {
 
 	/**
 	 * Removes the fractional part of floating-point number.
-	 * @param {String} value the numeric value of Input of type "Number"
+	 * @param {string} value the numeric value of Input of type "Number"
 	 */
 	removeFractionalPart(value) {
 		if (value.includes(".")) {
@@ -1455,7 +1679,7 @@ class Input extends UI5Element {
 	static get dependencies() {
 		const Suggestions = getFeature("InputSuggestions");
 
-		return [Popover].concat(Suggestions ? Suggestions.dependencies : []);
+		return [Popover, Icon].concat(Suggestions ? Suggestions.dependencies : []);
 	}
 
 	static async onDefine() {