Merge "[FIX] sap.ui.commons.DropDownBox: Selection of the ListBox items work onclick."

awolfish · Gerrit Code Review · commit 239ea10a57fc · 2016-09-19T09:48:00.000+02:00
diff --git a/src/sap.ui.commons/src/sap/ui/commons/DropdownBox.js b/src/sap.ui.commons/src/sap/ui/commons/DropdownBox.js
@@ -1305,6 +1305,25 @@ sap.ui.define(['jquery.sap.global', './ComboBox', './library', 'sap/ui/core/Hist
 
 	};
 
+	/**
+	 * Focuses the dropdown upon inner ListBox#click.
+	 * As there might be raise condition between the dropdown.focus and listbox.click events for some browsers.
+	 * this method makes sure the events are in the right order (listbox#click->dropdown#focus)
+	 * @private
+	 */
+	DropdownBox.prototype._focusAfterListBoxClick = function() {
+		if (!sap.ui.Device.browser.webkit) {
+			this.focus();
+		} else {
+			var oLB = this._getListBox();
+			oLB.addDelegate({
+				onclick: function() {//this will be executed after the ListBox#onclick handler
+					oLB.removeDelegate(this);
+					this.focus();
+				}.bind(this)});
+		}
+	};
+
 	/*
 	 * Handle the sapfocusleave pseudo event and ensure that when the focus moves to the list box,
 	 * the check change functionality (incl. fireChange) is not triggered.
@@ -1316,7 +1335,7 @@ sap.ui.define(['jquery.sap.global', './ComboBox', './library', 'sap/ui/core/Hist
 
 		var oLB = this._getListBox();
 		if (oEvent.relatedControlId && jQuery.sap.containsOrEquals(oLB.getFocusDomRef(), sap.ui.getCore().byId(oEvent.relatedControlId).getFocusDomRef())) {
-			this.focus();
+			this._focusAfterListBoxClick();
 		} else {
 			// we left the DropdownBox to another (unrelated) control and thus have to fire the change (if needed).
 			if (this.oPopup && this.oPopup.isOpen()) {
diff --git a/src/sap.ui.commons/test/sap/ui/commons/DropdownBox.html b/src/sap.ui.commons/test/sap/ui/commons/DropdownBox.html
@@ -348,6 +348,23 @@
 
 			oLyt.createRow(oLabel, oDdB, oTextView);
 
+			oLabel = new sap.ui.commons.Label({text: "Dropdown with histroy of 5 elements", labelFor: "ddb-history"});
+			var ddbHistory = new sap.ui.commons.DropdownBox("ddb-history"),
+				oTextView = new sap.ui.commons.TextView("TV12"),
+				allScen = ['A','B','C','D','E','F0','F1','F3','G','H','I','J','K','L','M','N'],
+				aLBItems = [];
+
+			for (var i = 0; i < allScen.length; i++) {
+				var item = new sap.ui.core.ListItem();
+				item.setText(allScen[i]);
+				item.setKey(allScen[i]);
+				ddbHistory.addItem(item);
+			}
+			ddbHistory.setMaxHistoryItems(5);
+			ddbHistory.attachChange(function() {oTextView.setText("Event: Change, selected item [" + ddbHistory.getSelectedKey() + "]");});
+
+			oLyt.createRow(oLabel, ddbHistory, oTextView);
+
 		</script>
 	</head>
 	<body class="sapUiBody" role="application">
