@openui5/sap.m 1.92.0 → 1.95.0

package/src/sap/m/Input.js

@@ -159,7 +159,7 @@ function(
 	 *
 	 * @extends sap.m.InputBase
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public
@@ -315,7 +315,20 @@ function(
 			 * <b>Note:</b> The autocomplete feature is disabled on Android devices due to a OS specific issue.
 			 * @since 1.61
 			 */
-			autocomplete: {type: "boolean", group: "Behavior", defaultValue: true}
+			autocomplete: {type: "boolean", group: "Behavior", defaultValue: true},
+
+			/**
+			 * Specifies whether clear icon is shown.
+			 * Pressing the icon will clear input's value and fire the change and liveChange events.
+			 * @since 1.94
+			 */
+			showClearIcon: { type: "boolean", defaultValue: false },
+
+			/**
+			 * Specifies whether the clear icon should be shown/hidden on user interaction.
+			 * @private
+			 */
+			effectiveShowClearIcon: { type: "boolean", defaultValue: false, visibility: "hidden" }
 		},
 		defaultAggregation : "suggestionItems",
 		aggregations : {
@@ -568,6 +581,15 @@ function(
 		// phase of the life cycle. Without this line, initially the condition fails and fires liveChange event
 		// even though there is no user input (check Input.prototype.onsapright).
 		this._setTypedInValue("");
+
+
+		// indicates whether input is clicked (on mobile) or the clear button
+		// used for identifying whether dialog should be open.
+		this._bClearButtonPressed = false;
+
+		// indicates whether input's popover has finished opening
+		// we asume that after open its content has been rendered => we don't have the power user scenario
+		this._bAfterOpenFinisihed = false;
 	};
 
 	/**
@@ -608,10 +630,9 @@ function(
 	 */
 	Input.prototype.onBeforeRendering = function() {
 		var sSelectedKey = this.getSelectedKey(),
-			bShowIcon = this.getShowValueHelp() && this.getEnabled() && this.getEditable(),
-			aEndIcons = this.getAggregation("_endIcon") || [],
-
-			oIcon = aEndIcons[0],
+			bShowValueHelpIcon = this.getShowValueHelp() && this.getEnabled() && this.getEditable(),
+			bShowClearIcon = this.getShowClearIcon(),
+			oIcon = this._oValueHelpIcon,
 			oSuggestionsPopover = this._getSuggestionsPopover(),
 			bSuggestionsPopoverIsOpen = oSuggestionsPopover && this._isSuggestionsPopoverOpen(),
 			oPopupInput = oSuggestionsPopover && oSuggestionsPopover.getInput(),
@@ -620,6 +641,12 @@ function(
 
 		InputBase.prototype.onBeforeRendering.call(this);
 
+		if (bShowClearIcon) {
+			this._getClearIcon().setProperty("visible", this.getProperty("effectiveShowClearIcon"));
+		} else if (this._oClearButton) {
+			this._getClearIcon().setProperty("visible", false);
+		}
+
 		this._deregisterEvents();
 
 		if (sSelectedKey) {
@@ -639,7 +666,7 @@ function(
 			}
 		}
 
-		if (bShowIcon) {
+		if (bShowValueHelpIcon) {
 			// ensure the creation of an icon
 			oIcon = this._getValueHelpIcon();
 			oIcon.setProperty("visible", true, true);
@@ -1044,13 +1071,11 @@ function(
 	 */
 	Input.prototype._getValueHelpIcon = function () {
 		var that = this,
-			aEndIcons = this.getAggregation("_endIcon") || [],
-			sIconSrc = this.getValueHelpIconSrc(),
-			oValueStateIcon = aEndIcons[0];
+			sIconSrc = this.getValueHelpIconSrc();
 
 		// for backward compatibility - leave this method to return the instance
-		if (!oValueStateIcon) {
-			oValueStateIcon = this.addEndIcon({
+		if (!this._oValueHelpIcon) {
+			this._oValueHelpIcon = this.addEndIcon({
 				id: this.getId() + "-vhi",
 				src: sIconSrc,
 				useIconTooltip: false,
@@ -1079,13 +1104,53 @@ function(
 					}
 				}
 			});
-		} else if (oValueStateIcon.getSrc() !== sIconSrc) {
-			oValueStateIcon.setSrc(sIconSrc);
+		} else if (this._oValueHelpIcon.getSrc() !== sIconSrc) {
+			this._oValueHelpIcon.setSrc(sIconSrc);
 		}
 
-		return oValueStateIcon;
+		return this._oValueHelpIcon;
 	};
 
+	Input.prototype._getClearIcon = function () {
+		var that = this;
+
+		if (this._oClearButton) {
+			return this._oClearButton;
+		}
+
+		this._oClearButton = this.addEndIcon({
+			src: IconPool.getIconURI("decline"),
+			noTabStop: true,
+			visible: false,
+			alt: this._oRb.getText("INPUT_CLEAR_ICON_ALT"),
+			useIconTooltip: false,
+			decorative: false,
+			press: function () {
+				if (that.getValue() !== "") {
+					that.fireChange({
+						value: ""
+					});
+
+					that.fireLiveChange({
+						value: ""
+					});
+
+					that.setValue("");
+
+					that._bClearButtonPressed = true;
+
+					setTimeout(function() {
+						if (Device.system.desktop) {
+							that.focus();
+							that._closeSuggestionPopup();
+						}
+					}, 0);
+				}
+			}
+		}, 0);
+
+		return this._oClearButton;
+	};
 	/**
 	 * Fire valueHelpRequest event.
 	 *
@@ -1140,9 +1205,12 @@ function(
 			 && this.getEditable()
 			 && this.getEnabled()
 			 && this.getShowSuggestion()
+			 && (!this._bClearButtonPressed)
 			 && oEvent.target.id !== this.getId() + "-vhi") {
 				this._openSuggestionsPopover();
 		}
+
+		this._bClearButtonPressed = false;
 	};
 
 	/**
@@ -1327,11 +1395,13 @@ function(
 
 		bFocusInPopup && this.setSelectionUpdatedFromList(true);
 
-		// The logic here works solely for suggestionItems. Once we move the whole dependent logic to coreItems
-		// it should work for suggetionRows as well.
-		if (this.getShowSuggestion() && this._bDoTypeAhead && bPopupOpened && !this._hasTabularSuggestions()) {
+		if (this.getShowSuggestion() && this._bDoTypeAhead && bPopupOpened) {
 			oSelectedItem = this._getSuggestionsPopover().getItemsContainer().getSelectedItem();
-			oSelectedItem && this.setSelectionItem(ListHelpers.getItemByListItem(aItems, oSelectedItem), true);
+			if (this._hasTabularSuggestions()) {
+				oSelectedItem && this.setSelectionRow(oSelectedItem, true);
+			} else {
+				oSelectedItem && this.setSelectionItem(ListHelpers.getItemByListItem(aItems, oSelectedItem), true);
+			}
 		}
 
 		if (bPopupOpened && !this.isComposingCharacter()) {
@@ -1397,7 +1467,7 @@ function(
 		// There's no typeahead for mobile devices.
 		// If the popup has been focused, then the list would take care of that functionality.
 		// There should be a matching item (proposed text in order to continue)
-		if (!this.isMobileDevice() && this._sProposedItemText) {
+		if (!this.isMobileDevice() && this._sProposedItemText && !this._bAfterOpenFinisihed) {
 			// Update selections for poweruser
 			var oSelectedItem = this.getSuggestionItems()
 				.filter(function (oItem) {
@@ -1586,7 +1656,7 @@ function(
 			// when compose a non ASCII character, in Chrome the value is updated in the next browser tick cycle
 			setTimeout(function () {
 				var sNewValue = this.getDOMValue() || '';
-				if (sNewValue < this.getStartSuggestion()) {
+				if (sNewValue.length < this.getStartSuggestion()) {
 					this._closeSuggestionPopup();
 				}
 			}.bind(this), 0);
@@ -1634,7 +1704,7 @@ function(
 	 * @param {jQuery.Event} oEvent The event.
 	 */
 	Input.prototype.onchange = function (oEvent) {
-		if (this.getShowValueHelp() || this.getShowSuggestion()) {
+		if (this.getShowValueHelp() || this.getShowSuggestion() || this.getProperty("effectiveShowClearIcon")) {
 			// can not handle browser change if value help or suggestions is enabled
 			// because change is fired before the value help is opened or when a link in suggestions is clicked
 			return;
@@ -1674,6 +1744,8 @@ function(
 		// always focus input field when typing in it
 		this.addStyleClass("sapMFocus");
 
+		this.setProperty("effectiveShowClearIcon", !!sValue);
+
 		// No need to fire suggest event when suggestion feature isn't enabled or runs on the phone.
 		// Because suggest event should only be fired by the input in dialog when runs on the phone.
 		if (this.getShowSuggestion() && !this.isMobileDevice()) {
@@ -1772,7 +1844,7 @@ function(
 	/**
 	 * Opens the <code>SuggestionsPopover</code> and adjusts the corresponding acc
 	 *
-	 * @param {Boolean} bOpenCondition Additional open condition
+	 * @param {boolean} bOpenCondition Additional open condition
 	 * @private
 	 */
 	Input.prototype._openSuggestionPopup = function (bOpenCondition) {
@@ -2323,6 +2395,9 @@ function(
 		InputBase.prototype.setValue.call(this, sValue);
 		this._onValueUpdated(sValue);
 		this._setTypedInValue("");
+
+		this.setProperty("effectiveShowClearIcon", !!sValue);
+
 		return this;
 	};
 
@@ -2707,22 +2782,25 @@ function(
 		oSuggPopover.attachEvent(SuggestionsPopover.M_EVENTS.SELECTION_CHANGE, function (oEvent) {
 			var oItem = oEvent.getParameter("newItem"),
 				sNewValue = this.calculateNewValue(oItem),
-				bFocusedGroupHeader = oItem && oItem.isA("sap.m.GroupHeaderListItem"),
+				bIsGroupItem = oItem && oItem.isA("sap.m.GroupHeaderListItem"),
 				oFocusDomRef = this.getFocusDomRef(),
 				sTypedValue = oFocusDomRef && oFocusDomRef.value.substring(0, oFocusDomRef.selectionStart),
 				oPreviousItem = oEvent.getParameter("previousItem"),
 				bPreviosFocusOnGroup = oPreviousItem && oPreviousItem.isA("sap.m.GroupHeaderListItem"),
 				iSelectionStart = calculateSelectionStart(selectionRange(oFocusDomRef, bPreviosFocusOnGroup), sNewValue, sTypedValue, bPreviosFocusOnGroup);
 
-			// setValue isn't used because here is too early to modify the lastValue of input
-			this.setDOMValue(bFocusedGroupHeader ? sTypedValue : sNewValue);
+			if (!oItem || bIsGroupItem) { // When out of the list or a GroupHeader item, reset to user's input
+				this.setDOMValue(sTypedValue);
+			} else { // Replace the value and highlight it
+				this.setDOMValue(sNewValue);
 
-			// memorize the value set by calling jQuery.val, because browser doesn't fire a change event when the value is set programmatically.
-			this._sSelectedSuggViaKeyboard = sNewValue;
-
-			if (!bFocusedGroupHeader) {
+				// If the matched item starts with user input's value, highlight only the remaining part. Otherwise, the whole item.
+				iSelectionStart = (iSelectionStart === 0 && sNewValue.indexOf(sTypedValue) === 0) ? sTypedValue.length : iSelectionStart;
 				this._doSelect(iSelectionStart);
 			}
+
+			// memorize the value set by calling jQuery.val, because browser doesn't fire a change event when the value is set programmatically.
+			this._sSelectedSuggViaKeyboard = sNewValue;
 		}, this);
 
 		if (this.getShowTableSuggestionValueHelp()) {
@@ -2802,15 +2880,21 @@ function(
 				.attachBeforeOpen(function() {
 					var oSuggestionsInput = oSuggPopover.getInput();
 					// set the same placeholder and maxLength as the original input
-					oSuggestionsInput.setPlaceholder(this.getPlaceholder());
-					oSuggestionsInput.setMaxLength(this.getMaxLength());
-					oSuggestionsInput.setValue(this.getValue());
+					["placeholder",
+						"maxLength",
+						"value",
+						"showClearIcon",
+						"effectiveShowClearIcon"
+					].forEach(function(sPropName) {
+							oSuggestionsInput.setProperty(sPropName, this.getProperty(sPropName));
+						}, this);
 				}, this);
 		} else {
 			oPopover
 				.attachAfterClose(function() {
-					var oList = this._getSuggestionsPopover().getItemsContainer(),
-						oSelectedItem = oList && oList.getSelectedItem();
+					var oList = this._getSuggestionsPopover().getItemsContainer();
+					var oSelectedItem = oList && oList.getSelectedItem();
+					var oDomRef = this.getDomRef();
 
 					if (this.getSelectionUpdatedFromList()) {
 						this.updateSelectionFromList(oSelectedItem);
@@ -2820,6 +2904,8 @@ function(
 						return;
 					}
 
+					this._bAfterOpenFinisihed = false;
+
 					// only destroy items in simple suggestion mode
 					if (oList instanceof Table) {
 						oSelectedItem && oSelectedItem.removeStyleClass("sapMLIBFocused");
@@ -2829,12 +2915,20 @@ function(
 					}
 
 					this._deregisterPopupResize();
+
+					if (oDomRef && oDomRef.contains(document.activeElement)) {
+						this.addStyleClass("sapMFocus");
+					}
 				}, this)
 				.attachBeforeOpen(function () {
 					oSuggPopover._sPopoverContentWidth = this.getMaxSuggestionWidth();
 
 					oSuggPopover.resizePopup(this);
 					this._registerPopupResize();
+					this._bAfterOpenFinisihed = false;
+				}, this)
+				.attachAfterOpen(function () {
+					this._bAfterOpenFinisihed = true;
 				}, this);
 		}
 
@@ -2929,7 +3023,7 @@ function(
 	/**
 	 * Indicates whether the control should use <code>sap.m.Dialog</code> or not.
 	 *
-	 * @returns {Boolean} Boolean.
+	 * @returns {boolean} Boolean.
 	 * @protected
 	 */
 	Input.prototype.isMobileDevice = function () {
@@ -2995,7 +3089,7 @@ function(
 	 *
 	 * @protected
 	 * @param {HTMLElement|undefined} oTarget The target of the event.
-	 * @returns {Boolean} Boolean indicating if the target is a valid opener.
+	 * @returns {boolean} Boolean indicating if the target is a valid opener.
 	 */
 	Input.prototype.isValueHelpOnlyOpener = function (oTarget) {
 		return true;

package/src/sap/m/InputBase.js

@@ -62,7 +62,7 @@ function(
 	 * @implements sap.ui.core.IFormContent
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public
@@ -514,7 +514,7 @@ function(
 		mParameters = mParameters || this.getChangeEventParams();
 
 		// check the control is editable or not
-		if (!this.getEditable() || !this.getEnabled()) {
+		if (this.getDomRef() && (!this.getEditable() || !this.getEnabled())) {
 			return;
 		}
 
@@ -1091,17 +1091,23 @@ function(
 	 * Adds an icon to be rendered
 	 * @param {string} sIconPosition a position for the icon to be rendered - begin or end
 	 * @param {object} oIconSettings settings for creating an icon
+	 * @param {int} iPosition position to be inserted in the aggregation
 	 * @see sap.ui.core.IconPool.createControlByURI
 	 * @private
 	 * @returns {null|sap.ui.core.Icon}
 	 */
-	InputBase.prototype._addIcon = function (sIconPosition, oIconSettings) {
+	InputBase.prototype._addIcon = function (sIconPosition, oIconSettings, iPosition) {
 		if (["begin", "end"].indexOf(sIconPosition) === -1) {
 			log.error('icon position is not "begin", neither "end", please check again the passed setting');
 			return null;
 		}
 		var oIcon = IconPool.createControlByURI(oIconSettings).addStyleClass(InputBase.ICON_CSS_CLASS);
-		this.addAggregation("_" + sIconPosition + "Icon", oIcon);
+
+		if (iPosition !== undefined) {
+			this.insertAggregation("_" + sIconPosition + "Icon", oIcon, iPosition);
+		} else {
+			this.addAggregation("_" + sIconPosition + "Icon", oIcon);
+		}
 
 		return oIcon;
 	};
@@ -1120,12 +1126,13 @@ function(
 	/**
 	 * Adds an icon to the end of the input
 	 * @param {object} oIconSettings settings for creating an icon
+	 * @param {int} iPosition position to be inserted in the aggregation. If not provided, the icon gets inserted on last position.
 	 * @see sap.ui.core.IconPool.createControlByURI
 	 * @protected
 	 * @returns {null|sap.ui.core.Icon}
 	 */
-	InputBase.prototype.addEndIcon = function (oIconSettings) {
-		return this._addIcon("end", oIconSettings);
+	InputBase.prototype.addEndIcon = function (oIconSettings, iPosition) {
+		return this._addIcon("end", oIconSettings, iPosition);
 	};
 
 	// do not cache jQuery object and define _$input for compatibility reasons

package/src/sap/m/InputListItem.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @extends sap.m.ListItemBase
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/Label.js

@@ -76,7 +76,7 @@ function(
 	 * @implements sap.ui.core.Label, sap.ui.core.IShrinkable
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/LightBox.js

@@ -99,7 +99,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public
@@ -253,7 +253,7 @@ sap.ui.define([
 	 * Invalidates the LightBox.
 	 *
 	 * @public
-	 * @param {object} oOrigin Origin of the invalidation.
+	 * @param {sap.ui.base.ManagedObject} oOrigin Origin of the invalidation.
 	 * @returns {this} this LightBox reference for chaining.
 	 */
 	LightBox.prototype.invalidate = function (oOrigin) {

package/src/sap/m/LightBoxItem.js

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/Link.js

@@ -81,7 +81,7 @@ function(
 	 * @implements sap.ui.core.IShrinkable, sap.ui.core.IFormContent, sap.ui.core.ITitleContent
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public
@@ -386,7 +386,7 @@ function(
 	 * Checks if the given sUri is valid depending on the validateUrl property
 	 *
 	 * @param {String} sUri
-	 * @returns {Boolean}
+	 * @returns {boolean}
 	 * @private
 	 */
 	Link.prototype._isHrefValid = function (sUri) {

package/src/sap/m/List.js

@@ -30,7 +30,7 @@ sap.ui.define(["./library", "./ListBase", "./ListRenderer"],
 	 * @extends sap.m.ListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public