@openui5/sap.m 1.92.0 → 1.93.3

package/src/sap/m/SelectDialog.js

@@ -12,7 +12,7 @@ sap.ui.define([
 	'./List',
 	'./SearchField',
 	'./library',
-	'sap/ui/core/Control',
+	'./SelectDialogBase',
 	'sap/ui/core/InvisibleText',
 	'sap/ui/Device',
 	'sap/m/Toolbar',
@@ -29,7 +29,7 @@ function(
 	List,
 	SearchField,
 	library,
-	Control,
+	SelectDialogBase,
 	InvisibleText,
 	Device,
 	Toolbar,
@@ -109,10 +109,10 @@ function(
 	 * <li> On desktop and tablet devices, the select dialog appears as a popover. </li>
 	 * </ul>
 	 * When using the <code>sap.m.SelectDialog</code> in SAP Quartz themes, the breakpoints and layout paddings could be determined by the dialog's width. To enable this concept and add responsive paddings to an element of the control, you have to add the following classes depending on your use case: <code>sapUiResponsivePadding--header</code>, <code>sapUiResponsivePadding--subHeader</code>, <code>sapUiResponsivePadding--content</code>, <code>sapUiResponsivePadding--footer</code>.
-	 * @extends sap.ui.core.Control
+	 * @extends sap.m.SelectDialogBase
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.93.3
 	 *
 	 * @constructor
 	 * @public
@@ -120,7 +120,7 @@ function(
 	 * @see {@link fiori:https://experience.sap.com/fiori-design-web/select-dialog/ Select Dialog}
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
-	var SelectDialog = Control.extend("sap.m.SelectDialog", /** @lends sap.m.SelectDialog.prototype */ { metadata : {
+	var SelectDialog = SelectDialogBase.extend("sap.m.SelectDialog", /** @lends sap.m.SelectDialog.prototype */ { metadata : {
 
 		library : "sap.m",
 		properties : {
@@ -342,7 +342,9 @@ function(
 					})
 				]
 			}),
-			selectionChange: this._selectionChange.bind(this)
+			selectionChange: this._selectionChange.bind(this),
+			updateStarted: this._updateStarted.bind(this),
+			updateFinished: this._updateFinished.bind(this)
 		});
 
 		this._oList.getInfoToolbar().addEventDelegate({
@@ -353,10 +355,6 @@ function(
 
 		this._list = this._oList; // for downward compatibility
 
-		// attach events to listen to model updates and show/hide a busy indicator
-		this._oList.attachUpdateStarted(this._updateStarted, this);
-		this._oList.attachUpdateFinished(this._updateFinished, this);
-
 		// store a reference to the busyIndicator to display when data is currently loaded by a service
 		this._oBusyIndicator = new BusyIndicator(this.getId() + "-busyIndicator").addStyleClass("sapMSelectDialogBusyIndicator", true);
 
@@ -414,7 +412,6 @@ function(
 			subHeader: this._oSubHeader,
 			content: [this._oBusyIndicator, this._oList],
 			leftButton: this._getCancelButton(),
-			initialFocus: (Device.system.desktop ? this._oSearchField : null),
 			draggable: this.getDraggable() && Device.system.desktop,
 			resizable: this.getResizable() && Device.system.desktop,
 			escapeHandler: function (oPromiseWrapper) {
@@ -432,8 +429,6 @@ function(
 		this._sSearchFieldValue = "";
 
 		// flags to control the busy indicator behaviour because the growing list will always show the no data text when updating
-		this._bFirstRequest = true; // to only show the busy indicator for the first request when the dialog has been openend
-		this._bLiveChange = false; // to check if the triggered event is LiveChange
 		this._iListUpdateRequested = 0; // to only show the busy indicator when we initiated the change
 	};
 
@@ -534,10 +529,8 @@ function(
 		this._oBusyIndicator = null;
 		this._sSearchFieldValue = null;
 		this._iListUpdateRequested = 0;
-		this._bFirstRequest = false;
 		this._bInitBusy = false;
 		this._bFirstRender = false;
-		this._bFirstRequest = false;
 
 		// sap.ui.core.Popup removes its content on close()/destroy() automatically from the static UIArea,
 		// but only if it added it there itself. As we did that, we have to remove it also on our own
@@ -593,7 +586,7 @@ function(
 		if (this._oDialog && (!arguments[0] || arguments[0] && arguments[0].getId() !== this.getId() + "-dialog")) {
 			this._oDialog.invalidate(arguments);
 		} else {
-			Control.prototype.invalidate.apply(this, arguments);
+			SelectDialogBase.prototype.invalidate.apply(this, arguments);
 		}
 
 		return this;
@@ -618,14 +611,12 @@ function(
 			this._bAppendedToUIArea = true;
 		}
 
-		// reset internal variables
-		this._bFirstRequest = true;
-
 		// set the search value
 		this._oSearchField.setValue(sSearchValue);
 		this._sSearchFieldValue = sSearchValue || "";
 
 		// open the dialog
+		this._setInitialFocus();
 		this._oDialog.open();
 
 		// open dialog with busy state if a list update is still in progress
@@ -907,7 +898,7 @@ function(
 
 		// pass the model to the list and also to the local control to allow binding of own properties
 		this._oList.setModel(oModel, sModelName);
-		Control.prototype.setModel.apply(this, arguments);
+		SelectDialogBase.prototype.setModel.apply(this, arguments);
 
 		// clear the selection label when setting the model
 		this._updateSelectionIndicator();
@@ -928,7 +919,7 @@ function(
 	SelectDialog.prototype.setBindingContext = function (oContext, sModelName) {
 		// pass the model to the list and also to the local control to allow binding of own properties
 		this._oList.setBindingContext(oContext, sModelName);
-		Control.prototype.setBindingContext.apply(this, arguments);
+		SelectDialogBase.prototype.setBindingContext.apply(this, arguments);
 
 		return this;
 	};
@@ -955,11 +946,6 @@ function(
 			oBinding = (oList ? oList.getBinding("items") : undefined),
 			bSearchValueDifferent = (this._sSearchFieldValue !== sValue); // to prevent unwanted duplicate requests
 
-		// BCP #1472004019/2015: focus after liveChange event is not changed
-		if (sEventType === "liveChange") {
-			this._bLiveChange = true;
-		}
-
 		// fire either the Search event or the liveChange event when dialog is opened.
 		// 1) when the clear icon is called then both liveChange and search events are fired but we only want to process the first one
 		// 2) when a livechange has been triggered by typing we don't want the next search event to be processed (typing + enter or typing + search button)
@@ -1018,6 +1004,8 @@ function(
 	 * @param {jQuery.Event} oEvent The event object
 	 */
 	SelectDialog.prototype._updateStarted = function (oEvent) {
+		this.fireUpdateStarted(oEvent.getParameters());
+
 		if (this.getModel() && this.getModel() instanceof sap.ui.model.odata.ODataModel) {
 			if (this._oDialog.isOpen() && this._iListUpdateRequested) {
 				// only set busy mode when we have an OData model
@@ -1035,34 +1023,14 @@ function(
 	 * @param {jQuery.Event} oEvent The event object
 	 */
 	SelectDialog.prototype._updateFinished = function (oEvent) {
+		this.fireUpdateFinished(oEvent.getParameters());
+
 		// only reset busy mode when we have an OData model
 		this._updateSelectionIndicator();
 		if (this.getModel() && this.getModel() instanceof sap.ui.model.odata.ODataModel) {
 			this._setBusy(false);
 			this._bInitBusy = false;
 		}
-		if (Device.system.desktop) {
-
-			if (this._oList.getItems()[0]) {
-				this._oDialog.setInitialFocus(this._oList.getItems()[0]);
-			} else {
-				this._oDialog.setInitialFocus(this._oSearchField);
-			}
-
-			// set initial focus manually after all items are visible
-			if (this._bFirstRequest && !this._bLiveChange) {
-				var oFocusControl = this._oList.getItems()[0];
-				if (!oFocusControl) {
-					oFocusControl = this._oSearchField;
-				}
-
-				if (oFocusControl.getFocusDomRef()) {
-					oFocusControl.getFocusDomRef().focus();
-				}
-			}
-		}
-
-		this._bFirstRequest = false;
 
 		// we received a request (from this or from another control) so set the counter to 0
 		this._iListUpdateRequested = 0;
@@ -1239,7 +1207,11 @@ function(
 	 *
 	 * @private
 	 */
-	SelectDialog.prototype._selectionChange = function () {
+	SelectDialog.prototype._selectionChange = function (oEvent) {
+		if (oEvent.getParameters) {
+			this.fireSelectionChange(oEvent.getParameters());
+		}
+
 		if (!this._oDialog) {
 			return;
 		}

package/src/sap/m/SelectDialogBase.js

@@ -0,0 +1,148 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides control sap.m.SelectDialogBase.
+sap.ui.define([
+		'sap/ui/Device',
+		'sap/ui/core/Control'
+],
+function(
+	Device,
+	Control
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new SelectDialogBase.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @class
+	 * The <code>sap.m.SelectDialogBase</code> control provides a base functionality of the
+	 * <code>sap.m.SelectDialog</code> and <code>sap.m.TableSelectDialog</code> controls.
+	 * @extends sap.ui.core.Control
+	 *
+	 * @author SAP SE
+	 * @version 1.93.3
+	 *
+	 * @constructor
+	 * @public
+	 * @abstract
+	 * @since 1.93
+	 * @alias sap.m.SelectDialogBase
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	var SelectDialogBase = Control.extend("sap.m.SelectDialogBase", /** @lends sap.m.SelectDialogBase.prototype */ {
+		metadata: {
+			library: "sap.m",
+			"abstract": true,
+			properties: {},
+			aggregations: {},
+			events: {
+				/**
+				 * Fires before <code>items</code> binding is updated (e.g. sorting, filtering)
+				 *
+				 * <b>Note:</b> Event handler should not invalidate the control.				 *
+				 * @since 1.93
+				 */
+				updateStarted : {
+					parameters : {
+
+						/**
+						 * The reason of the update, e.g. Binding, Filter, Sort, Growing, Change, Refresh, Context.
+						 */
+						reason : {type : "string"},
+
+						/**
+						 * Actual number of items.
+						 */
+						actual : {type : "int"},
+
+						/**
+						 * The total count of bound items. This can be used if the <code>growing</code> property is set to <code>true</code>.
+						 */
+						total : {type : "int"}
+					}
+				},
+
+				/**
+				 * Fires after <code>items</code> binding is updated and processed by the control.
+				 * @since 1.93
+				 */
+				updateFinished : {
+					parameters : {
+
+						/**
+						 * The reason of the update, e.g. Binding, Filter, Sort, Growing, Change, Refresh, Context.
+						 */
+						reason : {type : "string"},
+
+						/**
+						 * Actual number of items.
+						 */
+						actual : {type : "int"},
+
+						/**
+						 * The total count of bound items. This can be used if the <code>growing</code> property is set to <code>true</code>.
+						 */
+						total : {type : "int"}
+					}
+				},
+
+				/**
+				 * Fires when selection is changed via user interaction inside the control.
+				 * @since 1.93
+				 */
+				selectionChange : {
+					parameters : {
+
+						/**
+						 * The item whose selection has changed. In <code>MultiSelect</code> mode, only the up-most selected item is returned. This parameter can be used for single-selection modes.
+						 */
+						listItem : {type : "sap.m.ListItemBase"},
+
+						/**
+						 * Array of items whose selection has changed. This parameter can be used for <code>MultiSelect</code> mode.
+						 */
+						listItems : {type : "sap.m.ListItemBase[]"},
+
+						/**
+						 * Indicates whether the <code>listItem</code> parameter is selected or not.
+						 */
+						selected : {type : "boolean"},
+
+						/**
+						 * Indicates whether the select all action is triggered or not.
+						 */
+						selectAll : {type : "boolean"}
+					}
+				}
+			}
+		},
+		renderer: {
+			apiVersion: 2,
+			render: function () {
+			}
+		}
+	});
+
+	SelectDialogBase.prototype._setInitialFocus = function () {
+		if (!Device.system.desktop) {
+			return;
+		}
+
+		var oInitiallyFocusedControl = this._oSearchField;
+
+		if (this.getItems().length) {
+			oInitiallyFocusedControl = this.getItems()[0];
+		}
+
+		this._oDialog.setInitialFocus(oInitiallyFocusedControl);
+	};
+
+	return SelectDialogBase;
+});

package/src/sap/m/SelectList.js

@@ -37,7 +37,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.92.0
+		 * @version 1.93.3
 		 *
 		 * @constructor
 		 * @public
@@ -256,7 +256,7 @@ sap.ui.define([
 			}
 		};
 
-		SelectList.prototype.updateItems = function(sReason) {
+		SelectList.prototype.updateItems = function(sReason, oEventInfo) {
 			this.bItemsUpdated = false;
 
 			// note: for backward compatibility and to keep the old data binding behavior,
@@ -265,6 +265,16 @@ sap.ui.define([
 			this.updateAggregation("items");
 			this.bItemsUpdated = true;
 
+			// Do not try to synchronize selection when updateItems is called with reason Add/Remove VirtualContext,
+			// as in some cases, when forceSelection is "true", unwanted PATCH requests with null value may be triggered
+			if (oEventInfo && (oEventInfo.detailedReason === "AddVirtualContext"
+				|| oEventInfo.detailedReason === "RemoveVirtualContext")) {
+				this._bHasVirtualContext = true;
+				return;
+			}
+
+			this._bHasVirtualContext = false;
+
 			// Try to synchronize the selection (synchronous), but if any item's key match with the value of the "selectedKey" property,
 			// don't force the first enabled item to be selected when the forceSelection property is set to true.
 			// It could be possible that the items' properties (models and bindingContext) are not propagated at this point.
@@ -612,7 +622,7 @@ sap.ui.define([
 
 			// the aggregation items is not bound or
 			// it is bound and the data is already available
-			} else if (bForceSelection && this.getDefaultSelectedItem() && (!this.isBound("items") || this.bItemsUpdated)) {
+			} else if (bForceSelection && !this._bHasVirtualContext && this.getDefaultSelectedItem() && (!this.isBound("items") || this.bItemsUpdated)) {
 				try {
 					this.setSelection(this.getDefaultSelectedItem());
 				} catch (e) {

package/src/sap/m/SelectRenderer.js

@@ -86,6 +86,10 @@ sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/IconPool', 'sap/m/library',
 
 			oRm.style("max-width", oSelect.getMaxWidth());
 
+			if (bEnabled) {
+				oRm.attr("tabindex", "-1");
+			}
+
 			oRm.openEnd();
 			this.renderFocusElement(oRm, oSelect);
 			// Used in case control is in a form submitted by input[type="submit"].
@@ -178,6 +182,9 @@ sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/IconPool', 'sap/m/library',
 			oRm.attr("tabindex", "-1");
 			oRm.attr("aria-hidden", "true");
 
+			//The hidden field is not shown to the user, but the data is sent when the form is submitted.
+			oRm.attr("type", "hidden");
+
 			// Classes
 			oRm.class("sapUiPseudoInvisibleText");
 
@@ -196,12 +203,19 @@ sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/IconPool', 'sap/m/library',
 				sTextDir = oSelect.getTextDirection(),
 				sTextAlign = Renderer.getTextAlign(oSelect.getTextAlign(), sTextDir),
 				CSS_CLASS = SelectRenderer.CSS_CLASS,
-				bEditabledAndEnabled = oSelect.getEnabled() && oSelect.getEditable();
+				bEditabledAndEnabled = oSelect.getEnabled() && oSelect.getEditable(),
+				sTooltip = oSelect.getTooltip_AsString();
 
 			oRm.openStart("span", oSelect.getId() + "-label");
 			oRm.attr("aria-hidden", true);
 			oRm.class(CSS_CLASS + "Label");
 
+			// since focusable element has sapUiPseudoInvisibleText class
+			// the tooltip is also set to the label element to be visually displayed
+			if (sTooltip) {
+				oRm.attr("title", sTooltip);
+			}
+
 			if (oSelect.getValueState() !== ValueState.None && bEditabledAndEnabled) {
 				oRm.class(CSS_CLASS + "LabelState");
 				oRm.class(CSS_CLASS + "Label" + oSelect.getValueState());
@@ -264,11 +278,13 @@ sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/IconPool', 'sap/m/library',
 		 * @private
 		 */
 		SelectRenderer.renderIcon = function(oRm, oSelect) {
-			var sTooltip = oSelect.getTooltip_AsString();
+			var sTooltip = oSelect.getTooltip_AsString(),
+				oIconInfo = IconPool.getIconInfo(oSelect.getIcon()),
+				sIconText = oIconInfo && oIconInfo.text;
 
 			oRm.icon(oSelect.getIcon(), SelectRenderer.CSS_CLASS + "Icon", {
 				id: oSelect.getId() + "-icon",
-				title: sTooltip || null
+				title: sTooltip || sIconText || null
 			});
 		};
 

package/src/sap/m/SelectionDetails.js

@@ -39,7 +39,7 @@ function(
 	 * <b><i>Note:</i></b>It is protected and should only be used within the framework itself.
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.93.3
 	 *
 	 * @extends sap.ui.core.Control
 	 * @constructor
@@ -617,7 +617,10 @@ function(
 	 * @private
 	 */
 	SelectionDetails.prototype._getNavContainer = function(NavContainer) {
-		return this._oNavContainer || (this._oNavContainer = new NavContainer(this.getId() + "-nav-container"));
+		if (!this._oNavContainer) {
+			this._oNavContainer = new NavContainer(this.getId() + "-nav-container");
+		}
+		return this._oNavContainer;
 	};
 
 	/**

package/src/sap/m/SelectionDetailsFacade.js

@@ -10,7 +10,7 @@
  * @since 1.48.0
  * @public
  * @author SAP SE
- * @version 1.92.0
+ * @version 1.93.3
  * @borrows sap.ui.core.Element#addCustomData as #addCustomData
  * @borrows sap.ui.core.Element#getCustomData as #getCustomData
  * @borrows sap.ui.core.Element#indexOfCustomData as #indexOfCustomData
@@ -45,7 +45,7 @@
  * @since 1.48.0
  * @public
  * @author SAP SE
- * @version 1.92.0
+ * @version 1.93.3
  * @borrows sap.ui.core.Element#addCustomData as #addCustomData
  * @borrows sap.ui.core.Element#getCustomData as #getCustomData
  * @borrows sap.ui.core.Element#indexOfCustomData as #indexOfCustomData

package/src/sap/m/SelectionDetailsItem.js

@@ -54,7 +54,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.93.3
 	 *
 	 * @constructor
 	 * @protected

package/src/sap/m/SelectionDetailsItemLine.js

@@ -23,7 +23,7 @@ sap.ui.define(["sap/ui/core/Element", "sap/base/Log", "sap/base/util/isPlainObje
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.93.3
 	 *
 	 * @constructor
 	 * @protected

package/src/sap/m/Shell.js

@@ -35,7 +35,7 @@ sap.ui.define([
 		 * The Shell control can be used as root element of applications. It can contain an App or a <code>SplitApp</code> control.
 		 * The Shell provides some overarching functionality for the overall application and takes care of visual adaptation, such as a frame around the App, on desktop browser platforms.
 		 * @extends sap.ui.core.Control
-		 * @version 1.92.0
+		 * @version 1.93.3
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/SimpleFixFlex.js

@@ -31,7 +31,7 @@ function (Control, ResizeHandler, Log /**, SimpleFixFlexRenderer */) {
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.93.3
 	 *
 	 * @constructor
 	 * @private

package/src/sap/m/SinglePlanningCalendar.js

@@ -105,7 +105,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.93.3
 	 *
 	 * @constructor
 	 * @public
@@ -217,6 +217,9 @@ function(
 			 * The appointments to be displayed in the grid. Appointments outside the visible time frame are not rendered.
 			 * Appointments, longer than a day, will be displayed in all of the affected days.
 			 * To display an all-day appointment, the appointment must start at 00:00 and end on any day in the future in 00:00h.
+			 *
+			 * Note: The <code>customContent</code> functionality of the <code>CalendarAppointment</code> is not available
+			 * in the <code>SinglePlanningCalendar</code>. If set, it will not make any effect.
 			 */
 			appointments : {
 				type: "sap.ui.unified.CalendarAppointment",

package/src/sap/m/SinglePlanningCalendarDayView.js

@@ -25,7 +25,7 @@ function (library, SinglePlanningCalendarView) {
 	 * @extends sap.m.SinglePlanningCalendarView
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.93.3
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/SinglePlanningCalendarGrid.js

@@ -101,7 +101,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.92.0
+		 * @version 1.93.3
 		 *
 		 * @constructor
 		 * @private
@@ -587,9 +587,14 @@ sap.ui.define([
 					}
 
 					var oDragSession = oEvent.getParameter("dragSession"),
-						$SPCGridOverlay = this.$().find(".sapMSinglePCOverlay"),
+						oDragControl = oDragSession.getDragControl(),
+						oEventTarget = oEvent.getParameter("browserEvent") && oEvent.getParameter("browserEvent").target || null;
+
+					oDragControl._sAppointmentPartSuffix = oEventTarget && oEventTarget.id ? oEventTarget.id.replace(oDragControl.getId() + "-", "") : "";
+
+					var	$SPCGridOverlay = this.$().find(".sapMSinglePCOverlay"),
 						$Indicator = jQuery(oDragSession.getIndicator()),
-						$DraggedControl = oDragSession.getDragControl().$();
+						$DraggedControl = oDragControl.$();
 
 					if (this._isResizeHandleBottomMouseDownTarget) {
 						oDragSession.setComplexData("bottomHandle", "true");
@@ -640,7 +645,7 @@ sap.ui.define([
 						iVariableBoundaryY,
 						mDraggedControlConfig;
 
-					if (!oAppointmentStartingBoundaries) {
+						if (!oAppointmentStartingBoundaries) {
 						oAppointmentStartingBoundaries = {
 							top: oAppointmentRef.offsetTop,
 							bottom: oAppointmentRef.offsetTop + oAppointmentRef.getBoundingClientRect().height,
@@ -1020,6 +1025,12 @@ sap.ui.define([
 				aVisibleAppsInDay,
 				i, j;
 
+			// directly focus appointment part, if there is any selected
+			if (this._sSelectedAppointment) {
+				this._sSelectedAppointment.focus();
+				return this;
+			}
+
 			// Search amongst the visible blockers
 			for (i = 0; i < aVisibleBlockers.length; ++i) {
 				if (aVisibleBlockers[i].getId() === oFocusInfo.id) {
@@ -1072,6 +1083,7 @@ sap.ui.define([
 		 */
 		SinglePlanningCalendarGrid.prototype._toggleAppointmentSelection = function (oAppointment, bRemoveOldSelection) {
 			var aChangedApps = [],
+				oAppointmentDomRef = oAppointment && oAppointment.getDomRef(),
 				aAppointments,
 				iAppointmentsLength,
 				i;
@@ -1091,6 +1103,9 @@ sap.ui.define([
 			if (oAppointment) {
 				oAppointment.setProperty("selected", !oAppointment.getSelected());
 				aChangedApps.push(oAppointment);
+				this._sSelectedAppointment = oAppointment.getSelected() && oAppointmentDomRef ? oAppointment : undefined;
+			} else {
+				this._sSelectedAppointment = undefined;
 			}
 
 			return aChangedApps;
@@ -1194,13 +1209,28 @@ sap.ui.define([
 			}
 		};
 
+		SinglePlanningCalendarGrid.prototype._findSrcControl = function (oEvent) {
+			if (!oEvent.target.parentElement || !oEvent.target.parentElement.classList.contains("sapUiCalendarRowApps")) {
+				return oEvent.srcControl;
+			}
+
+			// data-sap-ui-related - This is a relation to appointment object.
+			// This is the connection between the DOM Element and the Object representing an appointment.
+			var sAppointmentId = oEvent.target.parentElement.getAttribute("data-sap-ui-related");
+
+			// finding the appointment
+			return this.getAppointments().find(function (oAppointment) {
+				return oAppointment.sId === sAppointmentId;
+			});
+		};
+
 		/**
 		 * Helper function handling <code>keydown</code> or <code>tap</code> event on the grid.
 		 *
 		 * @param {jQuery.Event} oEvent The event object.
 		 */
 		SinglePlanningCalendarGrid.prototype._fireSelectionEvent = function (oEvent) {
-			var oControl = oEvent.srcControl,
+			var oControl = this._findSrcControl(oEvent),
 				oGridCell = oEvent.target;
 
 			if (oEvent.target.classList.contains("sapMSinglePCRow") ||
@@ -1216,6 +1246,19 @@ sap.ui.define([
 					appointments: this._toggleAppointmentSelection(undefined, true)
 				});
 			} else if (oControl && oControl.isA("sap.ui.unified.CalendarAppointment")) {
+
+				// add suffix in appointment
+				if (oGridCell.parentElement && oGridCell.parentElement.getAttribute("id")) {
+					var sTargetId = oGridCell.parentElement.getAttribute("id");
+
+					// data-sap-ui-related - This is a relation to appointment object.
+					// This is the connection between the DOM Element and the Object representing an appointment.
+					var sBaseIDPart = oGridCell.parentElement.getAttribute("data-sap-ui-related");
+					var sSuffix = sTargetId.replace(sBaseIDPart + "-", "");
+
+					oControl._setAppointmentPartSuffix(sSuffix);
+				}
+
 				this.fireAppointmentSelect({
 					appointment: oControl,
 					appointments: this._toggleAppointmentSelection(oControl, !(oEvent.ctrlKey || oEvent.metaKey))