fix(ui5-datepicker): keyboard navigation works properly (#2549)

Keyboard navigation now works properly, when ui5-datepicker component popover is opened and there are disabled dates in the corresponding ui5-calendar component due to min/max set.
SAP · Dec 16, 2020 · 66cd1d7 · 66cd1d7
1 parent a1a3f80
commit 66cd1d7
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 9 deletions.
diff --git a/packages/main/src/Calendar.js b/packages/main/src/Calendar.js
@@ -631,9 +631,11 @@ class Calendar extends UI5Element {
 
 	async _setDayPickerCurrentIndex(calDate, applyFocus) {
 		await RenderScheduler.whenFinished();
-		const currentDate = new CalendarDate(calDate);
-		const currentDateIndex = this.dayPicker._getVisibleDays(currentDate).findIndex(date => date.valueOf() === currentDate.valueOf());
-		this.dayPicker._itemNav.currentIndex = currentDateIndex;
+		const currentDate = new CalendarDate(calDate, this._primaryCalendarType);
+		const currentIndex = this.dayPicker.focusableDays.findIndex(item => {
+			return CalendarDate.fromLocalJSDate(new Date(item.timestamp * 1000), this._primaryCalendarType).isSame(currentDate);
+		});
+		this.dayPicker._itemNav.currentIndex = currentIndex;
 		if (applyFocus) {
 			this.dayPicker._itemNav.focusCurrent();
 		} else {

diff --git a/packages/main/src/DayPicker.js b/packages/main/src/DayPicker.js
@@ -564,7 +564,7 @@ class DayPicker extends UI5Element {
 		}
 
 		currentTimestamp = calDate.valueOf() / 1000;
-		const newItemIndex = this._itemNav._getItems().findIndex(item => parseInt(item.timestamp) === currentTimestamp);
+		const newItemIndex = this.focusableDays.findIndex(item => parseInt(item.timestamp) === currentTimestamp);
 
 		this._itemNav.currentIndex = newItemIndex;
 		this._itemNav.focusCurrent();
@@ -656,7 +656,7 @@ class DayPicker extends UI5Element {
 		const focusableDays = [];
 
 		for (let i = 0; i < this._weeks.length; i++) {
-			const week = this._weeks[i].slice(1).filter(x => !x.disabled);
+			const week = this._weeks[i].slice(1).filter(dayItem => !dayItem.disabled);
 			focusableDays.push(week);
 		}
 
@@ -672,7 +672,10 @@ class DayPicker extends UI5Element {
 	}
 
 	_setCurrentItemTabIndex(index) {
-		this._itemNav._getCurrentItem().setAttribute("tabindex", index.toString());
+		const currentItem = this._itemNav._getCurrentItem();
+		if (currentItem) {
+			currentItem.setAttribute("tabindex", index.toString());
+		}
 	}
 
 	_modifySelectionAndNotifySubscribers(timestamp) {
@@ -837,7 +840,7 @@ class DayPicker extends UI5Element {
 		this.fireEvent("navigate", { timestamp });
 		await RenderScheduler.whenFinished();
 
-		const newItemIndex = this._itemNav._getItems().findIndex(item => parseInt(item.timestamp) === timestamp);
+		const newItemIndex = this.focusableDays.findIndex(item => parseInt(item.timestamp) === timestamp);
 		this._itemNav.currentIndex = newItemIndex;
 		this._itemNav.focusCurrent();
 	}

diff --git a/packages/main/src/MonthPicker.js b/packages/main/src/MonthPicker.js
@@ -237,7 +237,10 @@ class MonthPicker extends UI5Element {
 	}
 
 	_setCurrentItemTabIndex(index) {
-		this._itemNav._getCurrentItem().setAttribute("tabindex", index.toString());
+		const currentItem = this._itemNav._getCurrentItem();
+		if (currentItem) {
+			currentItem.setAttribute("tabindex", index.toString());
+		}
 	}
 
 	_onmousedown(event) {

diff --git a/packages/main/src/YearPicker.js b/packages/main/src/YearPicker.js
@@ -266,7 +266,10 @@ class YearPicker extends UI5Element {
 	}
 
 	_setCurrentItemTabIndex(index) {
-		this._itemNav._getCurrentItem().setAttribute("tabindex", index.toString());
+		const currentItem = this._itemNav._getCurrentItem();
+		if (currentItem) {
+			currentItem.setAttribute("tabindex", index.toString());
+		}
 	}
 
 	_onmousedown(event) {

diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
@@ -921,4 +921,21 @@ describe("Date Picker Tests", () => {
 		assert.strictEqual(date.getMonth(), 0, "Correct month value");
 		assert.strictEqual(date.getFullYear(), 2000, "Correct year value");
 	});
+
+	it("Keyboard navigation works when there are disabled dates in the calendar grid", () => {
+		datepicker.id = "#dp33";
+		datepicker.innerInput.click();
+		browser.keys("Jan 1, 2000");
+
+		datepicker.valueHelpIcon.click();
+
+		browser.keys("ArrowDown");
+
+		assert.ok(datepicker.getDisplayedDay(13).isFocusedDeep(), "Successfully navigated");
+
+		browser.keys("Escape");
+		datepicker.innerInput.click();
+		browser.keys(["Control", "A"]);
+		browser.keys("Backspace");
+	});
 });