feat(ui5-datepicker): implement keyboard handling (#1706)

fifoosid · web-flow · commit 15e915f3a4f6 · 2020-06-10T14:41:44.000+03:00
diff --git a/packages/base/src/Keys.js b/packages/base/src/Keys.js
@@ -131,17 +131,25 @@ const isDelete = event => (event.key ? event.key === "Delete" : event.keyCode ==
 
 const isShow = event => {
 	if (event.key) {
-		return (event.key === "F4" && !hasModifierKeys(event)) || (((event.key === "ArrowDown" || event.key === "Down") || (event.key === "ArrowUp" || event.key === "Up")) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false));
+		return isF4(event) || isShowByArrows(event);
 	}
 
 	return (event.keyCode === KeyCodes.F4 && !hasModifierKeys(event)) || (event.keyCode === KeyCodes.ARROW_DOWN && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false));
 };
 
+const isF4 = event => {
+	return event.key === "F4" && !hasModifierKeys(event);
+};
+
+const isShowByArrows = event => {
+	return ((event.key === "ArrowDown" || event.key === "Down") || (event.key === "ArrowUp" || event.key === "Up")) && checkModifierKeys(event, /* Ctrl */ false, /* Alt */ true, /* Shift */ false);
+};
+
 const hasModifierKeys = event => event.shiftKey || event.altKey || getCtrlKey(event);
 
 const getCtrlKey = event => !!(event.metaKey || event.ctrlKey); // double negation doesn't have effect on boolean but ensures null and undefined are equivalent to false.
 
-const checkModifierKeys = (oEvent, bCtrlKey, bAltKey, bShiftKey) => oEvent.shiftKey === bShiftKey && oEvent.altKey === bAltKey && getCtrlKey(oEvent) === bCtrlKey;
+const checkModifierKeys = (event, bCtrlKey, bAltKey, bShiftKey) => event.shiftKey === bShiftKey && event.altKey === bAltKey && getCtrlKey(event) === bCtrlKey;
 
 export {
 	isEnter,
@@ -158,4 +166,5 @@ export {
 	isBackSpace,
 	isDelete,
 	isShow,
+	isF4,
 };
diff --git a/packages/base/src/delegate/ItemNavigation.js b/packages/base/src/delegate/ItemNavigation.js
@@ -27,6 +27,8 @@ class ItemNavigation extends EventProvider {
 		this.horizontalNavigationOn = autoNavigation || navigationMode === NavigationMode.Horizontal;
 		this.verticalNavigationOn = autoNavigation || navigationMode === NavigationMode.Vertical;
 
+		this.pageSize = options.pageSize;
+
 		this.rootWebComponent = rootWebComponent;
 		this.rootWebComponent.addEventListener("keydown", this.onkeydown.bind(this));
 		this.rootWebComponent._onComponentStateFinalized = () => {
@@ -192,6 +194,10 @@ class ItemNavigation extends EventProvider {
 
 		const currentItem = items[this.currentIndex];
 
+		if (!currentItem) {
+			return;
+		}
+
 		if (currentItem.isUI5Element) {
 			return currentItem.getFocusDomRef();
 		}
@@ -254,18 +260,17 @@ class ItemNavigation extends EventProvider {
 		if (!this.hasNextPage) {
 			this.currentIndex = items.length - 1;
 		} else {
-			this.currentIndex = 0;
+			this.currentIndex -= this.pageSize;
 		}
 	}
 
 	_handlePrevPage() {
 		this.fireEvent(ItemNavigation.PAGE_TOP);
-		const items = this._getItems();
 
 		if (!this.hasPrevPage) {
 			this.currentIndex = 0;
 		} else {
-			this.currentIndex = (this.pageSize || items.length) - 1;
+			this.currentIndex = this.pageSize + this.currentIndex;
 		}
 	}
 }
diff --git a/packages/base/src/types/NavigationMode.js b/packages/base/src/types/NavigationMode.js
@@ -2,5 +2,6 @@ const NavigationMode = {
 	Auto: "Auto",
 	Vertical: "Vertical",
 	Horizontal: "Horizontal",
+	Paging: "Paging",
 };
 export default NavigationMode;
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -9,7 +9,7 @@ import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isShow } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isShow, isF4 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/icons/appointment-2.js";
@@ -335,14 +335,14 @@ class DatePicker extends UI5Element {
 					this._focusInputAfterClose = false;
 				}
 
-				const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`);
+				const calendar = this.calendar;
 				if (calendar) {
 					calendar._hideMonthPicker();
 					calendar._hideYearPicker();
 				}
 			},
 			afterOpen: () => {
-				const calendar = this.responsivePopover.querySelector(`#${this._id}-calendar`);
+				const calendar = this.calendar;
 
 				if (!calendar) {
 					return;
@@ -435,11 +435,26 @@ class DatePicker extends UI5Element {
 
 	_onkeydown(event) {
 		if (isShow(event)) {
-			this.togglePicker();
-			this._getInput().focus();
+			event.preventDefault(); // Prevent scroll on Alt/Option + Arrow Up/Down
+			if (this.isOpen()) {
+				if (isF4(event)) {
+					if (this.calendar._monthPicker._hidden) {
+						this.calendar._showYearPicker();
+					}
+				} else {
+					this._toggleAndFocusInput();
+				}
+			} else {
+				this._toggleAndFocusInput();
+			}
 		}
 	}
 
+	_toggleAndFocusInput() {
+		this.togglePicker();
+		this._getInput().focus();
+	}
+
 	_getInput() {
 		return this.shadowRoot.querySelector("ui5-input");
 	}
@@ -539,6 +554,10 @@ class DatePicker extends UI5Element {
 		return this.getFormat().format(new Date());
 	}
 
+	get calendar() {
+		return this.responsivePopover.querySelector(`#${this._id}-calendar`);
+	}
+
 	get _calendarDate() {
 		const millisecondsUTC = this.getFormat().parse(this.validValue, true).getTime();
 		const oCalDate = CalendarDate.fromTimestamp(
diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
@@ -8,6 +8,7 @@
 	with-padding
 	no-stretch
 	?_hide-header={{_shouldHideHeader}}
+	@keydown="{{_onkeydown}}"
 	@ui5-after-close="{{_respPopoverConfig.afterClose}}"
 	@ui5-after-open="{{_respPopoverConfig.afterOpen}}"
 >
diff --git a/packages/main/src/MonthPicker.js b/packages/main/src/MonthPicker.js
@@ -129,7 +129,12 @@ class MonthPicker extends UI5Element {
 		this._oLocale = getLocale();
 		this._oLocaleData = new LocaleData(this._oLocale);
 
-		this._itemNav = new ItemNavigation(this, { rowSize: 3, behavior: ItemNavigationBehavior.Cyclic });
+		this._itemNav = new ItemNavigation(this, {
+			pageSize: 12,
+			rowSize: 3,
+			behavior: ItemNavigationBehavior.Paging,
+		});
+
 		this._itemNav.getItemsCallback = function getItemsCallback() {
 			const focusableMonths = [];
 
diff --git a/packages/main/src/YearPicker.js b/packages/main/src/YearPicker.js
@@ -9,6 +9,7 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
 import YearPickerTemplate from "./generated/templates/YearPickerTemplate.lit.js";
 
 // Styles
@@ -133,7 +134,12 @@ class YearPicker extends UI5Element {
 
 		this._oLocale = getLocale();
 
-		this._itemNav = new ItemNavigation(this, { rowSize: 4 });
+		this._itemNav = new ItemNavigation(this, {
+			pageSize: 20,
+			rowSize: 4,
+			behavior: ItemNavigationBehavior.Paging,
+		});
+
 		this._itemNav.getItemsCallback = function getItemsCallback() {
 			const focusableYears = [];
 
diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
@@ -1,4 +1,3 @@
-
 const datepicker = require("../pageobjects/DatePickerTestPage");
 const assert = require("chai").assert;
 
@@ -325,6 +324,10 @@ describe("Date Picker Tests", () => {
 		browser.keys(["Alt", "ArrowUp", "NULL"]);
 
 		assert.ok(datepicker.isPickerOpen(), "datepicker is open");
+
+		browser.keys(["Alt", "ArrowUp", "NULL"]);
+
+		assert.notOk(datepicker.isPickerOpen(), "datepicker is closed");
 	});
 
 	it("[Alt] + [DOWN] toggles the calendar", () => {
@@ -336,6 +339,31 @@ describe("Date Picker Tests", () => {
 		browser.keys(["Alt", "ArrowDown", "NULL"]);
 
 		assert.ok(datepicker.isPickerOpen(), "datepicker is open");
+
+		browser.keys(["Alt", "ArrowDown", "NULL"]);
+
+		assert.notOk(datepicker.isPickerOpen(), "datepicker is closed");
+	});
+
+	it("[F4] shows year picker after date picker is open", () => {
+		datepicker.id = "#dp11";
+
+		datepicker.valueHelpIcon.click()
+		browser.keys("F4");
+
+		assert.notOk(datepicker.calendar.getProperty("_yearPicker")._hidden, "Year picker is open");
+		datepicker.valueHelpIcon.click(); // close the datepicker
+	});
+
+	it("[F4] on year picker doesn't close the date picker", () => {
+		datepicker.id = "#dp11";
+
+		datepicker.valueHelpIcon.click();
+		browser.keys("F4");
+
+		browser.keys("F4");
+
+		assert.ok(datepicker.isPickerOpen, "Datepicker remains open");
 	});
 
 	it("daypicker extreme values max", () => {
@@ -631,7 +659,6 @@ describe("Date Picker Tests", () => {
 		datepicker.root.keys("ArrowRight");
 		datepicker.root.keys("ArrowRight");
 		datepicker.root.keys("ArrowRight");
-		datepicker.root.keys("ArrowDown");
 		assert.ok(datepicker.getDisplayedYear(7).isFocusedDeep(), "Years out of range can not be reached with keyboard");
 	});
 

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,8 @@ class ItemNavigation extends EventProvider {`
`27`	`27`	`this.horizontalNavigationOn = autoNavigation \|\| navigationMode === NavigationMode.Horizontal;`
`28`	`28`	`this.verticalNavigationOn = autoNavigation \|\| navigationMode === NavigationMode.Vertical;`
`29`	`29`
	`30`	`+ this.pageSize = options.pageSize;`
	`31`	`+`
`30`	`32`	`this.rootWebComponent = rootWebComponent;`
`31`	`33`	`this.rootWebComponent.addEventListener("keydown", this.onkeydown.bind(this));`
`32`	`34`	`this.rootWebComponent._onComponentStateFinalized = () => {`
`@@ -192,6 +194,10 @@ class ItemNavigation extends EventProvider {`
`192`	`194`
`193`	`195`	`const currentItem = items[this.currentIndex];`
`194`	`196`
	`197`	`+ if (!currentItem) {`
	`198`	`+ return;`
	`199`	`+ }`
	`200`	`+`
`195`	`201`	`if (currentItem.isUI5Element) {`
`196`	`202`	`return currentItem.getFocusDomRef();`
`197`	`203`	`}`
`@@ -254,18 +260,17 @@ class ItemNavigation extends EventProvider {`
`254`	`260`	`if (!this.hasNextPage) {`
`255`	`261`	`this.currentIndex = items.length - 1;`
`256`	`262`	`} else {`
`257`		`- this.currentIndex = 0;`
	`263`	`+ this.currentIndex -= this.pageSize;`
`258`	`264`	`}`
`259`	`265`	`}`
`260`	`266`
`261`	`267`	`_handlePrevPage() {`
`262`	`268`	`this.fireEvent(ItemNavigation.PAGE_TOP);`
`263`		`- const items = this._getItems();`
`264`	`269`
`265`	`270`	`if (!this.hasPrevPage) {`
`266`	`271`	`this.currentIndex = 0;`
`267`	`272`	`} else {`
`268`		`- this.currentIndex = (this.pageSize \|\| items.length) - 1;`
	`273`	`+ this.currentIndex = this.pageSize + this.currentIndex;`
`269`	`274`	`}`
`270`	`275`	`}`
`271`	`276`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`	`with-padding`
`9`	`9`	`no-stretch`
`10`	`10`	`?_hide-header={{_shouldHideHeader}}`
	`11`	`+ @keydown="{{_onkeydown}}"`
`11`	`12`	`@ui5-after-close="{{_respPopoverConfig.afterClose}}"`
`12`	`13`	`@ui5-after-open="{{_respPopoverConfig.afterOpen}}"`
`13`	`14`	`>`