fix(datepicker): focus datepicker after opening it inside the popup

Fixes #1708

Closes #1717

src/datepicker/datepicker-input.spec.ts

@@ -51,6 +51,19 @@ describe('NgbInputDatepicker', () => {
 
     it('should support the "position" option',
        () => { createTestCmpt(`<input ngbDatepicker #d="ngbDatepicker" [placement]="'bottom-right'">`); });
+
+    it('should focus the datepicker after opening', () => {
+      const fixture = createTestCmpt(`
+          <input ngbDatepicker #d="ngbDatepicker">
+          <button (click)="open(d)">Open</button>
+      `);
+
+      // open
+      const button = fixture.nativeElement.querySelector('button');
+      button.click();
+      fixture.detectChanges();
+      expect(document.activeElement).toBe(fixture.nativeElement.querySelector('ngb-datepicker'));
+    });
   });
 
   describe('ngModel interactions', () => {

src/datepicker/datepicker-input.ts

@@ -212,6 +212,9 @@ export class NgbInputDatepicker implements OnChanges,
         this._onChange(selectedDate);
         this.close();
       });
+
+      // focus handling
+      this._cRef.instance.focus();
     }
   }
 

src/datepicker/datepicker.spec.ts

@@ -434,6 +434,14 @@ describe('ngb-datepicker', () => {
     expect(datepicker.getHeaderMargin()).toBe(4);
   });
 
+  it('should allow focusing datepicker programmatically', () => {
+    const datepicker = TestBed.createComponent(NgbDatepicker);
+    expect(datepicker.nativeElement.getAttribute('tabindex')).toBe('0');
+
+    datepicker.componentInstance.focus();
+    expect(document.activeElement).toBe(datepicker.nativeElement);
+  });
+
   describe('ngModel', () => {
 
     it('should update model based on calendar clicks', async(() => {
@@ -851,6 +859,7 @@ describe('ngb-datepicker', () => {
          for (let index = 0; index < 31; index++) {
            expect(getDay(fixture.nativeElement, index)).toHaveCssClass('text-muted');
          }
+         expect(fixture.nativeElement.querySelector('ngb-datepicker').getAttribute('tabindex')).toBeFalsy();
        }));
   });
 

src/datepicker/datepicker.ts

@@ -11,7 +11,8 @@ import {
   SimpleChanges,
   EventEmitter,
   Output,
-  OnDestroy
+  OnDestroy,
+  ElementRef
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 import {NgbCalendar} from './ngb-calendar';
@@ -56,7 +57,8 @@ export interface NgbDatepickerNavigateEvent {
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     'class': 'd-inline-block rounded',
-    '[attr.tabindex]': 'disabled ? undefined : "0"',
+    'tabindex': '0',
+    '[attr.tabindex]': 'model.disabled ? undefined : "0"',
     '(blur)': 'showFocus(false)',
     '(focus)': 'showFocus(true)',
     '(keydown)': 'onKeyDown($event)'
@@ -207,7 +209,7 @@ export class NgbDatepicker implements OnDestroy,
   constructor(
       private _keyMapService: NgbDatepickerKeyMapService, public _service: NgbDatepickerService,
       private _calendar: NgbCalendar, public i18n: NgbDatepickerI18n, config: NgbDatepickerConfig,
-      private _cd: ChangeDetectorRef) {
+      private _cd: ChangeDetectorRef, private _elementRef: ElementRef) {
     this.dayTemplate = config.dayTemplate;
     this.displayMonths = config.displayMonths;
     this.firstDayOfWeek = config.firstDayOfWeek;
@@ -247,6 +249,11 @@ export class NgbDatepicker implements OnDestroy,
     });
   }
 
+  /**
+   * Manually focus the datepicker
+   */
+  focus() { this._elementRef.nativeElement.focus(); }
+
   getHeaderHeight() {
     const h = this.showWeekdays ? 6.25 : 4.25;
     return this.displayMonths === 1 || this.navigation !== 'select' ? h - 2 : h;