From 596913475fe26d7d26d3738e5a946fa0a159814c Mon Sep 17 00:00:00 2001
From: Peter Blazejewicz <peterblazejewicz@users.noreply.github.com>
Date: Wed, 25 Sep 2019 22:03:19 +0200
Subject: [PATCH] fix(datepicker): retain focus on navigation links

This fixes an issue on some clients due to browser being inconsistent on
handling focus on the button clicks. After the change the navigation
button within the datepicker will retain focus to allow subsequent
keyboard based navigation within datepicker instance.

Fixes: #2780
---
 src/datepicker/datepicker-navigation.spec.ts | 20 ++++++++++++++++----
 src/datepicker/datepicker-navigation.ts      | 14 ++++++++++++--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/datepicker/datepicker-navigation.spec.ts b/src/datepicker/datepicker-navigation.spec.ts
index de5088829f..5127dcd8ec 100644
--- a/src/datepicker/datepicker-navigation.spec.ts
+++ b/src/datepicker/datepicker-navigation.spec.ts
@@ -92,19 +92,31 @@ describe('ngb-datepicker-navigation', () => {
   it('should send navigation events', () => {
     const fixture =
         createTestComponent(`<ngb-datepicker-navigation (navigate)="onNavigate($event)"></ngb-datepicker-navigation>`);
-
-    const links = getNavigationLinks(fixture.nativeElement);
+    const[previousButton, nextButton] = getNavigationLinks(fixture.nativeElement);
     spyOn(fixture.componentInstance, 'onNavigate');
 
     // prev
-    links[0].click();
+    previousButton.click();
     expect(fixture.componentInstance.onNavigate).toHaveBeenCalledWith(NavigationEvent.PREV);
 
     // next
-    links[1].click();
+    nextButton.click();
     expect(fixture.componentInstance.onNavigate).toHaveBeenCalledWith(NavigationEvent.NEXT);
   });
 
+  it('should retain focus on the navigation links after click', () => {
+    const fixture = createTestComponent(`<ngb-datepicker-navigation></ngb-datepicker-navigation>`);
+    const[previousButton, nextButton] = getNavigationLinks(fixture.nativeElement);
+
+    // prev
+    previousButton.click();
+    expect(document.activeElement).toBe(previousButton);
+
+    // next
+    nextButton.click();
+    expect(document.activeElement).toBe(nextButton);
+  });
+
   it('should have buttons of type button', () => {
     const fixture = createTestComponent(`<ngb-datepicker-navigation></ngb-datepicker-navigation>`);
 
diff --git a/src/datepicker/datepicker-navigation.ts b/src/datepicker/datepicker-navigation.ts
index 4d033fe626..3560aecc1d 100644
--- a/src/datepicker/datepicker-navigation.ts
+++ b/src/datepicker/datepicker-navigation.ts
@@ -10,7 +10,7 @@ import {NgbDatepickerI18n} from './datepicker-i18n';
   styleUrls: ['./datepicker-navigation.scss'],
   template: `
     <div class="ngb-dp-arrow">
-      <button type="button" class="btn btn-link ngb-dp-arrow-btn" (click)="navigate.emit(navigation.PREV)" [disabled]="prevDisabled"
+      <button type="button" class="btn btn-link ngb-dp-arrow-btn" (click)="onClickPrev($event)" [disabled]="prevDisabled"
               i18n-aria-label="@@ngb.datepicker.previous-month" aria-label="Previous month"
               i18n-title="@@ngb.datepicker.previous-month" title="Previous month">
         <span class="ngb-dp-navigation-chevron"></span>
@@ -32,7 +32,7 @@ import {NgbDatepickerI18n} from './datepicker-i18n';
       <div class="ngb-dp-arrow" *ngIf="i !== months.length - 1"></div>
     </ng-template>
     <div class="ngb-dp-arrow right">
-      <button type="button" class="btn btn-link ngb-dp-arrow-btn" (click)="navigate.emit(navigation.NEXT)" [disabled]="nextDisabled"
+      <button type="button" class="btn btn-link ngb-dp-arrow-btn" (click)="onClickNext($event)" [disabled]="nextDisabled"
               i18n-aria-label="@@ngb.datepicker.next-month" aria-label="Next month"
               i18n-title="@@ngb.datepicker.next-month" title="Next month">
         <span class="ngb-dp-navigation-chevron"></span>
@@ -55,4 +55,14 @@ export class NgbDatepickerNavigation {
   @Output() select = new EventEmitter<NgbDate>();
 
   constructor(public i18n: NgbDatepickerI18n) {}
+
+  onClickPrev(event: MouseEvent) {
+    (event.target as HTMLElement).focus();
+    this.navigate.emit(this.navigation.PREV);
+  }
+
+  onClickNext(event: MouseEvent) {
+    (event.target as HTMLElement).focus();
+    this.navigate.emit(this.navigation.NEXT);
+  }
 }