@ui5/webcomponents 0.0.0-4180fe799 → 0.0.0-453158269

package/src/Input.js

@@ -1,7 +1,12 @@
 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 {
+	isIE,
+	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 {
@@ -10,20 +15,32 @@ import {
 	isSpace,
 	isEnter,
 	isBackSpace,
+	isDelete,
 	isEscape,
 	isTabNext,
+	isPageUp,
+	isPageDown,
+	isHome,
+	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 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,
@@ -201,6 +218,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>,
@@ -292,7 +321,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
@@ -302,9 +332,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
 		 */
@@ -315,7 +345,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
@@ -326,17 +356,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,
 		},
 
@@ -344,6 +394,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,
 		},
@@ -460,6 +526,21 @@ const metadata = {
  * "@ui5/webcomponents/dist/features/InputSuggestions.js"
  * to enable the suggestions functionality.
  *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-input</code> provides the following keyboard shortcuts:
+ * <br>
+ *
+ * <ul>
+ * <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>
+ * <li>[UP] - Focuses the previous matching item in the suggestion list.</li>
+ * <li>[HOME] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.</li>
+ * <li>[END] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.</li>
+ * <li>[PAGEUP] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.</li>
+ * <li>[PAGEDOWN] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Input.js";</code>
@@ -520,7 +601,7 @@ class Input extends UI5Element {
 		this.suggestionSelectionCanceled = false;
 
 		// Indicates if the change event has already been fired
-		this._changeFired = false;
+		this._changeFiredValue = null;
 
 		// tracks the value between focus in and focus out to detect that change event should be fired.
 		this.previousValue = undefined;
@@ -534,9 +615,15 @@ class Input extends UI5Element {
 		// The last value confirmed by the user with "ENTER"
 		this.lastConfirmedValue = "";
 
+		// The value that the user is typed in the input
+		this.valueBeforeAutoComplete = "";
+
 		// Indicates, if the user pressed the BACKSPACE key.
 		this._backspaceKeyDown = false;
 
+		// Indicates, if the user is typing. Gets reset once popup is closed
+		this.isTyping = false;
+
 		// all sementic events
 		this.EVENT_CHANGE = "change";
 		this.EVENT_INPUT = "input";
@@ -566,19 +653,49 @@ class Input extends UI5Element {
 			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);
 
-		const FormSupport = getFeature("FormSupport");
+		this.FormSupport = getFeature("FormSupport");
+		const hasItems = this.suggestionItems.length;
+		const hasValue = !!this.value;
+		const isFocused = this.shadowRoot.querySelector("input") === getActiveElement();
 
-		if (FormSupport) {
-			FormSupport.syncNativeHiddenInput(this);
+		if (this._isPhone) {
+			this.open = this.openOnMobile;
+		} else if (this._forceOpen) {
+			this.open = true;
+		} else {
+			this.open = hasValue && hasItems && isFocused && this.isTyping;
+		}
+
+		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,
 			});
@@ -594,6 +711,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);
 		}
@@ -614,6 +734,22 @@ class Input extends UI5Element {
 			return this._handleEnter(event);
 		}
 
+		if (isPageUp(event)) {
+			return this._handlePageUp(event);
+		}
+
+		if (isPageDown(event)) {
+			return this._handlePageDown(event);
+		}
+
+		if (isHome(event)) {
+			return this._handleHome(event);
+		}
+
+		if (isEnd(event)) {
+			return this._handleEnd(event);
+		}
+
 		if (isEscape(event)) {
 			return this._handleEscape(event);
 		}
@@ -628,9 +764,15 @@ 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
+		if (isDelete(event)) {
+			this.value = event.target.value;
+		}
+
 		this._keyDown = false;
 		this._backspaceKeyDown = false;
 	}
@@ -663,18 +805,68 @@ class Input extends UI5Element {
 	_handleEnter(event) {
 		const itemPressed = !!(this.Suggestions && this.Suggestions.onEnter(event));
 
+		// 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 (!itemPressed) {
 			this.fireEventByAction(this.ACTION_ENTER);
 			this.lastConfirmedValue = this.value;
+
+			if (this.FormSupport) {
+				this.FormSupport.triggerFormSubmit(this);
+			}
+
 			return;
 		}
 
 		this.focused = true;
 	}
 
+	_handlePageUp(event) {
+		if (this._isSuggestionsFocused) {
+			this.Suggestions.onPageUp(event);
+		} else {
+			event.preventDefault();
+		}
+	}
+
+	_handlePageDown(event) {
+		if (this._isSuggestionsFocused) {
+			this.Suggestions.onPageDown(event);
+		} else {
+			event.preventDefault();
+		}
+	}
+
+	_handleHome(event) {
+		if (this._isSuggestionsFocused) {
+			this.Suggestions.onHome(event);
+		}
+	}
+
+	_handleEnd(event) {
+		if (this._isSuggestionsFocused) {
+			this.Suggestions.onEnd(event);
+		}
+	}
+
 	_handleEscape() {
 		const hasSuggestions = this.showSuggestions && !!this.Suggestions;
 		const isOpen = hasSuggestions && this.open;
+		const innerInput = this.getInputDOMRefSync();
+		const isAutoCompleted = innerInput.selectionEnd - innerInput.selectionStart > 0;
 
 		if (!isOpen) {
 			this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
@@ -683,28 +875,34 @@ 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;
+		this._shouldAutocomplete = false;
 
 		this._inputIconFocused = event.target && event.target === this.querySelector("[ui5-icon]");
 	}
@@ -713,9 +911,11 @@ 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._preventNextChange = this.effectiveShowClearIcon && this.shadowRoot.contains(event.relatedTarget);
+
 		// 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) {
+		if (focusedOutToSuggestions || focusedOutToValueStateMessage) {
 			event.stopImmediatePropagation();
 			return;
 		}
@@ -726,13 +926,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() {
@@ -750,17 +951,37 @@ class Input extends UI5Element {
 	_click(event) {
 		if (isPhone() && !this.readonly && this.Suggestions) {
 			this.blur();
-			this.open = true;
+			this.openOnMobile = true;
 		}
 	}
 
-	_handleChange(event) {
-		if (!this._changeFired) {
+	_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._preventNextChange) {
+			this._preventNextChange = false;
+			return;
+		}
+
+		if (this._changeFiredValue !== this.value) {
+			this._changeFiredValue = this.value;
 			this.fireEvent(this.EVENT_CHANGE);
 		}
+	}
+
+	_clear() {
+		this.value = "";
+		this.fireEvent(this.EVENT_INPUT);
+		this._handleChange();
 
-		// Set event as no longer marked
-		this._changeFired = false;
+		if (!this._isPhone) {
+			this.focus();
+		}
 	}
 
 	_scroll(event) {
@@ -771,8 +992,8 @@ class Input extends UI5Element {
 		});
 	}
 
-	async _handleInput(event) {
-		const inputDomRef = await this.getInputDOMRef();
+	_handleInput(event) {
+		const inputDomRef = this.getInputDOMRefSync();
 		const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
 
 		this.suggestionSelectionCanceled = false;
@@ -796,6 +1017,10 @@ class Input extends UI5Element {
 
 			// Perform manual handling in case of floating number
 			// and if the user did not select the entire input value
+			if (this._selectedText.indexOf(",") > -1) {
+				this._selectedText = this._selectedText.replace(",", ".");
+			}
+
 			if (rgxFloat.test(this.value) && this._selectedText !== this.value) {
 				const newValue = this.removeFractionalPart(this.value);
 
@@ -831,13 +1056,43 @@ class Input extends UI5Element {
 
 		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.value = value;
+
+		innerInput.value = value;
+		innerInput.setSelectionRange(filterValue.length, value.length);
+	}
+
 	_handleResize() {
 		this._inputWidth = this.offsetWidth;
 	}
@@ -861,6 +1116,11 @@ class Input extends UI5Element {
 			this.blur();
 			this.focused = false;
 		}
+
+		this.isTyping = false;
+		this.openOnMobile = false;
+		this.open = false;
+		this._forceOpen = false;
 	}
 
 	/**
@@ -891,6 +1151,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;
@@ -921,16 +1194,17 @@ class Input extends UI5Element {
 			this.valueBeforeItemSelection = itemText;
 			this.lastConfirmedValue = itemText;
 			this.fireEvent(this.EVENT_INPUT);
-			this.fireEvent(this.EVENT_CHANGE);
-
-			// Mark the change event to avoid double firing
-			this._changeFired = true;
+			this._handleChange();
 		}
 
 		this.valueBeforeItemPreview = "";
 		this.suggestionSelectionCanceled = false;
 
 		this.fireEvent(this.EVENT_SUGGESTION_ITEM_SELECT, { item });
+
+		this.isTyping = false;
+		this.openOnMobile = false;
+		this._forceOpen = false;
 	}
 
 	previewSuggestion(item) {
@@ -946,13 +1220,17 @@ 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);
 	}
 
 	/**
 	 * The suggestion item on preview.
-	 * @type { ui5-suggestion-item }
+	 * @type { sap.ui.webcomponents.main.IInputSuggestionItem }
 	 * @readonly
 	 * @public
 	 */
@@ -999,7 +1277,7 @@ class Input extends UI5Element {
 		// 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.fireEvent(this.EVENT_CHANGE);
+			this._handleChange();
 		}
 	}
 
@@ -1021,6 +1299,14 @@ class Input extends UI5Element {
 		return this.nativeInput;
 	}
 
+	getInputDOMRefSync() {
+		if (isPhone() && this.Suggestions) {
+			return this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
+		}
+
+		return this.nativeInput;
+	}
+
 	/**
 	 * Returns a reference to the native input element
 	 * @protected
@@ -1081,6 +1367,10 @@ class Input extends UI5Element {
 		});
 	}
 
+	onItemMouseDown(event) {
+		event.preventDefault();
+	}
+
 	onItemSelected(item, keyboardUsed) {
 		this.selectSuggestion(item, keyboardUsed);
 	}
@@ -1236,7 +1526,7 @@ class Input extends UI5Element {
 	}
 
 	get shouldDisplayOnlyValueStateMessage() {
-		return this.hasValueStateMessage && !this.open && this.focused;
+		return this.hasValueStateMessage && !this.readonly && !this.open && this.focused;
 	}
 
 	get shouldDisplayDefaultValueStateMessage() {
@@ -1286,6 +1576,10 @@ class Input extends UI5Element {
 		return isPhone();
 	}
 
+	get _isSuggestionsFocused() {
+		return !this.focused && this.Suggestions && this.Suggestions.isOpened();
+	}
+
 	/**
 	 * Returns the placeholder value.
 	 * @protected
@@ -1314,6 +1608,10 @@ class Input extends UI5Element {
 		return this.valueState !== ValueState.None ? result : "";
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	/**
 	 * This method is relevant for sap_horizon theme only
 	 */
@@ -1347,7 +1645,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(".")) {
@@ -1363,7 +1661,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() {