diff --git a/common/changes/office-ui-fabric-react/keco-calendar-keydown-regression_2018-04-24-15-57.json b/common/changes/office-ui-fabric-react/keco-calendar-keydown-regression_2018-04-24-15-57.json new file mode 100644 index 0000000000000..3816bc46c2f2a --- /dev/null +++ b/common/changes/office-ui-fabric-react/keco-calendar-keydown-regression_2018-04-24-15-57.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Gate calendar month, year, and today keydowns for only ENTER as onClick handles space with button nodes to fix double date change regression.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "keco@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx index 138bf8b85ccd7..8326b0fc23956 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx @@ -260,7 +260,7 @@ export class Calendar extends BaseComponent impl } private _onGotoTodayKeyDown = (ev: React.KeyboardEvent): void => { - if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) { + if (ev.which === KeyCodes.enter) { ev.preventDefault(); this._onGotoToday(); } else if (ev.which === KeyCodes.tab && !ev.shiftKey) { diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx index a443b150e0fdd..e0493c4cd2f01 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx @@ -566,11 +566,15 @@ export class CalendarDay extends BaseComponent): void => { - this._onKeyDown(this._onSelectPrevMonth, ev); + if (ev.which === KeyCodes.enter) { + this._onKeyDown(this._onSelectPrevMonth, ev); + } } private _onNextMonthKeyDown = (ev: React.KeyboardEvent): void => { - this._onKeyDown(this._onSelectNextMonth, ev); + if (ev.which === KeyCodes.enter) { + this._onKeyDown(this._onSelectNextMonth, ev); + } } private _getWeeks(propsToUse: ICalendarDayProps): IDayInfo[][] { diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx index 0536048d0c370..24997e311c92f 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx @@ -178,7 +178,9 @@ export class CalendarMonth extends BaseComponent { } private _onSelectNextYearKeyDown = (ev: React.KeyboardEvent): void => { - this._onKeyDown(this._onSelectNextYear, ev); + if (ev.which === KeyCodes.enter) { + this._onKeyDown(this._onSelectNextYear, ev); + } } private _onSelectPrevYear = (): void => { @@ -187,7 +189,9 @@ export class CalendarMonth extends BaseComponent { } private _onSelectPrevYearKeyDown = (ev: React.KeyboardEvent): void => { - this._onKeyDown(this._onSelectPrevYear, ev); + if (ev.which === KeyCodes.enter) { + this._onKeyDown(this._onSelectPrevYear, ev); + } } private _onSelectMonth = (newMonth: number): void => {