fix(ui5-calendar): keyboard navigation in the picker grid now works p…

…roperly (#2532)

* fix(ui5-calendar): keyboard navigation works properly after date deselection

Deselecting a date, when ui5-calendar selection type is "Multiple",
now doesn't cause keyboard navigation in the grid to stop working.

packages/main/src/Calendar.js

@@ -564,7 +564,15 @@ class Calendar extends UI5Element {
 
 	_handleSelectedDatesChange(event) {
 		const selectedDates = event.detail.dates;
-		this.timestamp = selectedDates[selectedDates.length - 1];
+
+		// Deselecting a date in multiple selection type
+		if (this.selection === CalendarSelection.Multiple && this.selectedDates.length > selectedDates.length) {
+			const deselectedDates = this.selectedDates.filter(timestamp => !selectedDates.includes(timestamp));
+			this.timestamp = deselectedDates[0];
+		} else {
+			this.timestamp = selectedDates[selectedDates.length - 1];
+		}
+
 		this.selectedDates = [...selectedDates];
 		this.fireEvent("selected-dates-change", { dates: selectedDates });
 	}

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

@@ -228,6 +228,25 @@ describe("Calendar general interaction", () => {
 		assert.deepEqual(selectedDates, [971136000, 971222400, 971308800], "Change event is fired with proper data");
 	});
 
+	it("Keyboard navigation works properly, when calendar selection type is set to 'Multiple'", () => {
+		const toggleButton = browser.$("#weekNumbersButton");
+		const calendar = browser.$("#calendar1");
+		calendar.setAttribute("selection", "Multiple");
+		calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000);
+
+		toggleButton.click();
+		toggleButton.click();
+		browser.keys("Tab");
+		// Select the focused date
+		browser.keys("Space");
+
+		// Deselect the focused date
+		browser.keys("Space");
+		browser.keys("ArrowRight");
+
+		assert.ok(calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971222400"]`).isFocusedDeep(), "Focus is properly set");
+	});
+
 	it("Calendar with 'Range' selection type", () => {
 		const calendar = browser.$("#calendar1");
 		calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000);