Merge remote-tracking branch 'origin/master' into mcb-custom-filtering

packages/base/src/Device.js

@@ -146,7 +146,7 @@ const _getDesktopOS = () => {
 
 		return {
 			"name": OS.WINDOWS,
-			"versionStr": uaResult[1],
+			"versionStr": (uaResult && uaResult[1]) || "",
 		};
 	}
 

packages/fiori/src/FlexibleColumnLayout.hbs

@@ -8,15 +8,7 @@
 	</div>
 
 	<div class="ui5-fcl-arrow-container" style="{{styles.arrowsContainer.start}}">
-		<ui5-button
-			class="ui5-fcl-arrow ui5-fcl-arrow--start"
-			icon="slim-arrow-right"
-			design="Transparent"
-			@click="{{startArrowClick}}"
-			style="{{styles.arrows.start}}"
-			aria-label="{{accStartArrowText}}"
-			title="{{accStartArrowText}}"
-		></ui5-button>
+		{{> startArrow}}
 	</div>
 
 	<div
@@ -28,15 +20,7 @@
 	</div>
 
 	<div class="ui5-fcl-arrow-container" style="{{styles.arrowsContainer.end}}">
-		<ui5-button
-			class="ui5-fcl-arrow ui5-fcl-arrow--end"
-			style="{{styles.arrows.end}}"
-			icon="slim-arrow-left"
-			design="Transparent"
-			@click="{{endArrowClick}}"
-			aria-label="{{accEndArrowText}}"
-			title="{{accEndArrowText}}"
-		></ui5-button>
+		{{> endArrow}}
 	</div>
 
 	<div
@@ -50,4 +34,29 @@
 	<span id="{{_id}}-startColumnText" class="ui5-hidden-text">{{accStartColumnText}}</span>
 	<span id="{{_id}}-midColumnText" class="ui5-hidden-text">{{accMiddleColumnText}}</span>
 	<span id="{{_id}}-endColumnText" class="ui5-hidden-text">{{accEndColumnText}}</span>
-</div>
+</div>
+
+{{#*inline "startArrow"}}
+	<ui5-button
+		class="ui5-fcl-arrow ui5-fcl-arrow--start"
+		icon="slim-arrow-right"
+		design="Transparent"
+		@click="{{startArrowClick}}"
+		style="{{styles.arrows.start}}"
+		aria-label="{{accStartArrowText}}"
+		title="{{accStartArrowText}}"
+	></ui5-button>
+{{/inline}}
+
+
+{{#*inline "endArrow"}}
+	<ui5-button
+		class="ui5-fcl-arrow ui5-fcl-arrow--end"
+		style="{{styles.arrows.end}}"
+		icon="slim-arrow-left"
+		design="Transparent"
+		@click="{{endArrowClick}}"
+		aria-label="{{accEndArrowText}}"
+		title="{{accEndArrowText}}"
+	></ui5-button>
+{{/inline}}

packages/main/src/ComboBox.js

@@ -297,6 +297,19 @@ const metadata = {
 		 * @public
 		 */
 		input: {},
+
+		/**
+		 * Fired when selection is changed by user interaction
+		 *
+		 * @event sap.ui.webcomponents.main.Combobox#selection-change
+		 * @param {HTMLElement} item item to be selected.
+		 * @public
+		 */
+		"selection-change": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
 	},
 };
 
@@ -371,6 +384,7 @@ class ComboBox extends UI5Element {
 		this._initialRendering = true;
 		this._itemFocused = false;
 		this._tempFilterValue = "";
+		this._selectionChanged = false;
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
@@ -385,7 +399,15 @@ class ComboBox extends UI5Element {
 		}
 
 		if (this._autocomplete && domValue !== "") {
-			this._autoCompleteValue(domValue);
+			const item = this._autoCompleteValue(domValue);
+
+			if (!this._selectionChanged && (item && !item.selected)) {
+				this.fireEvent("selection-change", {
+					item,
+				});
+
+				this._selectionChanged = false;
+			}
 		} else {
 			this._tempValue = domValue;
 		}
@@ -570,6 +592,12 @@ class ComboBox extends UI5Element {
 		this._isKeyNavigation = true;
 		this._itemFocused = true;
 		this.fireEvent("input");
+
+		this.fireEvent("selection-change", {
+			item: this._filteredItems[indexOfItem],
+		});
+
+		this._selectionChanged = true;
 	}
 
 	_keydown(event) {
@@ -629,6 +657,10 @@ class ComboBox extends UI5Element {
 				this.inner.setSelectionRange(0, this._tempValue.length);
 			}, 0);
 		}
+
+		if (matchingItems.length) {
+			return matchingItems[0];
+		}
 	}
 
 	_selectMatchingItem() {
@@ -659,6 +691,14 @@ class ComboBox extends UI5Element {
 		this._tempValue = listItem.mappedItem.text;
 		this.filterValue = this._tempValue;
 
+		if (!listItem.mappedItem.selected) {
+			this.fireEvent("selection-change", {
+				item: listItem.mappedItem,
+			});
+
+			this._selectionChanged = true;
+		}
+
 		this._filteredItems.map(item => {
 			item.selected = (item === listItem.mappedItem);
 

packages/main/src/DatePicker.js

@@ -478,7 +478,7 @@ class DatePicker extends UI5Element {
 			this.maxDate = null;
 			console.warn(`In order for the "maxDate" property to have effect, you should enter valid date format`); // eslint-disable-line
 		}
-		if (this._checkValueValidity(this.value)) {
+		if (this._checkValueValidity(this.value) || this.checkRealValueValidity()) {
 			this._changeCalendarSelection();
 		} else {
 			this._calendar.selectedDates = [];
@@ -649,6 +649,13 @@ class DatePicker extends UI5Element {
 		return this.isValid(value) && this.isInValidRange(this._getTimeStampFromString(value));
 	}
 
+	/**
+	 * This method is used in the derived classes
+	 */
+	checkRealValueValidity() {
+		return false;
+	}
+
 	_click(event) {
 		if (isPhone()) {
 			this.responsivePopover.open(this);

packages/main/src/DateRangePicker.js

@@ -206,7 +206,8 @@ class DateRangePicker extends DatePicker {
 
 		this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._firstDateTimestamp * 1000, this._lastDateTimestamp * 1000);
 		this.value = this._formatValue(this._firstDateTimestamp, this._lastDateTimestamp);
-		this._prevValue = this.value;
+		this.realValue = this.value;
+		this._prevValue = this.realValue;
 	}
 
 	_changeCalendarSelection(focusTimestamp) {
@@ -217,23 +218,23 @@ class DateRangePicker extends DatePicker {
 
 		const oCalDate = this._calendarDate,
 			timestamp = focusTimestamp || oCalDate.valueOf() / 1000,
-			dates = this._splitValueByDelimiter(this.value);
+			dates = this._splitValueByDelimiter(this.realValue);
 
 		if (this._initialRendering) {
 			this._oneTimeStampSelected = dates[0].trim() === dates[1].trim();
-			this._setValue(this.value);
+			this._setValue(this.realValue);
 		}
 
 		this._calendar = Object.assign({}, this._calendar);
 		this._calendar.timestamp = timestamp;
-		if (this.value && this._checkValueValidity(this.value)) {
+		if (this.realValue && this._checkValueValidity(this.realValue)) {
 			this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._getTimeStampFromString(dates[0]), this._getTimeStampFromString(dates[1]));
 		}
 	}
 
 	get _calendarDate() {
-		const dates = this._splitValueByDelimiter(this.value),
-			value = this._checkValueValidity(this.value) ? dates[0] : this.getFormat().format(new Date()),
+		const dates = this._splitValueByDelimiter(this.realValue),
+			value = this._checkValueValidity(this.realValue) ? dates[0] : this.getFormat().format(new Date()),
 			millisecondsUTCFirstDate = value ? this.getFormat().parse(value, true).getTime() : this.getFormat().parse(this.validValue, true).getTime(),
 			oCalDateFirst = CalendarDate.fromTimestamp(
 				millisecondsUTCFirstDate - (millisecondsUTCFirstDate % (24 * 60 * 60 * 1000)),
@@ -243,6 +244,10 @@ class DateRangePicker extends DatePicker {
 		return oCalDateFirst;
 	}
 
+	get _shoudHideValueInInput() {
+		return this._firstDateTimestamp === this._lastDateTimestamp && this._firstDateTimestamp;
+	}
+
 	/**
 	 * Currently selected first date represented as JavaScript Date instance.
 	 *
@@ -303,6 +308,10 @@ class DateRangePicker extends DatePicker {
 		return this.isValid(value) && this.isInValidRange(value);
 	}
 
+	checkRealValueValidity() {
+		return this.isValid(this.realValue) && this.isInValidRange(this.realValue);
+	}
+
 	isValid(value) {
 		const dateStrings = this._splitValueByDelimiter(value, this.delimiter),
 			isFirstDateValid = super.isValid(dateStrings[0]),
@@ -363,9 +372,9 @@ class DateRangePicker extends DatePicker {
 			const fireChange = this._handleCalendarSelectedDatesChange();
 
 			if (fireChange) {
-				this.fireEvent("change", { value: this.value, valid: true });
+				this.fireEvent("change", { value: this.realValue, valid: true });
 				// Angular two way data binding
-				this.fireEvent("value-changed", { value: this.value, valid: true });
+				this.fireEvent("value-changed", { value: this.realValue, valid: true });
 			}
 		}
 	}
@@ -378,7 +387,7 @@ class DateRangePicker extends DatePicker {
 		this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._firstDateTimestamp * 1000, this._lastDateTimestamp * 1000);
 		this._focusInputAfterClose = true;
 
-		if (this.isInValidRange(this.value)) {
+		if (this.isInValidRange(this.realValue)) {
 			this.valueState = ValueState.None;
 		} else {
 			this.valueState = ValueState.Error;
@@ -402,8 +411,12 @@ class DateRangePicker extends DatePicker {
 
 	_updateValueCalendarSelectedDatesChange() {
 		// Collect both dates and merge them into one
-		this.value = this._formatValue(this._firstDateTimestamp, this._lastDateTimestamp);
-		this._prevValue = this.value;
+		if (this._firstDateTimestamp !== this._lastDateTimestamp || this._oneTimeStampSelected) {
+			this.value = this._formatValue(this._firstDateTimestamp, this._lastDateTimestamp);
+		}
+
+		this.realValue = this._formatValue(this._firstDateTimestamp, this._lastDateTimestamp);
+		this._prevValue = this.realValue;
 	}
 
 	_formatValue(firstDateValue, lastDateValue) {

packages/main/test/pages/ComboBox.html

@@ -97,6 +97,9 @@
 
 	<div class="demo-section">
 		<span id="change-event-result"></span>
+		<br />
+		<span id="selection-change-event-result"></span>
+
 	</div>
 
 	<div class="demo-section">
@@ -209,6 +212,10 @@ <h3>ComboBox in Compact</h3>
 			document.getElementById("change-event-result").innerHTML = event.target.value;
 		});
 
+		document.getElementById("combo").addEventListener("ui5-selection-change", function(event) {
+			document.getElementById("selection-change-event-result").innerHTML = event.detail.item.text;
+		});
+
 		document.getElementById("change-cb").addEventListener("ui5-change", function(event) {
 			document.getElementById("change-placeholder").innerHTML = event.target.value;
 			document.getElementById("change-count").innerHTML = parseInt(document.getElementById("change-count").innerHTML) + 1;

packages/main/test/specs/ComboBox.spec.js

@@ -272,4 +272,21 @@ describe("General interaction", () => {
 		listItems = popover.$("ui5-list").$$("ui5-li");
 		assert.notOk(popover.opened, "Popover should be closed when no match");
 	});
+
+	it ("Tests selection-change event and its parameters", () => {
+		const combo = $("#combo");
+		const label = $("#selection-change-event-result");
+		const arrow = combo.shadow$("[input-icon]");
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#combo");
+		const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+		let listItems = popover.$("ui5-list").$$("ui5-li");
+
+		arrow.click();
+
+		const listItem = listItems[8];
+
+		listItem.click();
+
+		assert.strictEqual(label.getText(), listItem.shadow$(".ui5-li-title").getText(), "event is fired correctly");
+	});
 });