fix(ui5-daterange-picker): month is not changed when select first dat… (#3255)

Until now, when the user navigates to a month in the future or in the past, and the first date of the range is
selected, the picker goes back to the current month. Now this is fixed - on a date click the month stays unchanged.

Fixes #3129

Author: NHristov-sap

packages/main/src/DateRangePicker.js

@@ -92,6 +92,10 @@ class DateRangePicker extends DatePicker {
 		return this._extractLastTimestamp(this.value);
 	}
 
+	get _tempTimestamp() {
+		return this._tempValue && this.getFormat().parse(this._tempValue, true).getTime() / 1000;
+	}
+
 	/**
 	 * Required by DatePicker.js
 	 * @override
@@ -105,7 +109,7 @@ class DateRangePicker extends DatePicker {
 	 * @override
 	 */
 	get _calendarTimestamp() {
-		return this._firstDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
+		return this._tempTimestamp || this._firstDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
 	}
 
 	/**
@@ -165,6 +169,14 @@ class DateRangePicker extends DatePicker {
 		input.setCaretPosition(caretPos); // Return the caret on the previous position after rendering
 	}
 
+	/**
+	 * @override
+	 */
+	 onResponsivePopoverAfterClose() {
+		this._tempValue = ""; // reset _tempValue on popover close
+		super.onResponsivePopoverAfterClose();
+	}
+
 	/**
 	 * @override
 	 */
@@ -211,7 +223,6 @@ class DateRangePicker extends DatePicker {
 
 		const newValue = this._buildValue(...event.detail.dates); // the value will be normalized so we don't need to order them here
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
-		this._tempValue = "";
 		this._focusInputAfterClose = true;
 		this.closePicker();
 	}

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

@@ -183,4 +183,25 @@ describe("DateRangePicker general interaction", () => {
 		assert.strictEqual(daterangepicker.shadow$("ui5-input").getProperty("valueState"), "None", "The value state is on none");
 	});
 
+	it("Month is not changed in multiselect mode", () => {
+		browser.url(`http://localhost:${PORT}/test-resources/pages/DateRangePicker.html`);
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#daterange-picker1");
+		const daterangepicker = browser.$("#daterange-picker1");
+		const calendarHeader = browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-calendar-header`);
+		const dayPicker = browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
+		const dayOne = dayPicker.shadow$(`.ui5-dp-root`).$(".ui5-dp-content").$$("div > .ui5-dp-item" )[15];
+		const nextButton = calendarHeader.shadow$(`[data-ui5-cal-header-btn-next]`);
+		const monthButton = calendarHeader.shadow$(`[data-ui5-cal-header-btn-month]`);
+		const monthName = monthButton.innerHTML;
+
+		daterangepicker.click();
+		browser.keys("F4");
+
+		nextButton.click();
+		nextButton.click();
+		dayOne.click();
+
+		assert.strictEqual(monthButton.innerHTML, monthName, "The month is not changed after selecting the first date in the future");
+	});
+
 });