feat(datepicker): return back focus after selecting date from datepic…

…ker (#5633)

* fix(datepicker): return back focus after selecting date from datepicker

* feat(datepicker): move returnFocusToInput to config, add demo

demo/src/app/components/+datepicker/datepicker-section.list.ts

@@ -20,6 +20,7 @@ import { DemoDatepickerMinModeComponent } from './demos/min-mode/min-mode.compon
 import { DemoDatepickerOutsideClickComponent } from './demos/outside-click/outside-click';
 import { DemoDatepickerPlacementComponent } from './demos/placement/placement';
 import { DemoDatepickerReactiveFormsComponent } from './demos/reactive-forms/reactive-forms.component';
+import { DemoDatePickerReturnFocusToInputComponent } from './demos/return-focus-to-input/return-focus-to-input.component';
 import { DemoDatepickerDateCustomClassesComponent } from './demos/date-custom-classes/date-custom-classes';
 
 import {
@@ -249,6 +250,14 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader!./demos/reactive-forms/reactive-forms.component.html'),
         outlet: DemoDatepickerReactiveFormsComponent
       },
+      {
+        title: 'Return focus to input',
+        anchor: 'return-focus-to-input',
+        component: require('!!raw-loader!./demos/return-focus-to-input/return-focus-to-input.component.ts'),
+        html: require('!!raw-loader!./demos/return-focus-to-input/return-focus-to-input.component.html'),
+        description: `<p>Allows to return focus to input of datepicker or daterangepicker after the date or daterange selection</p>`,
+        outlet: DemoDatePickerReturnFocusToInputComponent
+      },
       {
         title: 'Manual triggering',
         anchor: 'triggers-manual',

demo/src/app/components/+datepicker/demos/index.ts

@@ -19,7 +19,7 @@ import { DemoDatepickerMinModeComponent } from './min-mode/min-mode.component';
 import { DemoDatepickerOutsideClickComponent } from './outside-click/outside-click';
 import { DemoDatepickerPlacementComponent } from './placement/placement';
 import { DemoDatepickerReactiveFormsComponent } from './reactive-forms/reactive-forms.component';
-
+import { DemoDatePickerReturnFocusToInputComponent } from './return-focus-to-input/return-focus-to-input.component'
 import {
   DemoDatePickerSelectDatesFromOtherMonthsComponent
 } from './select-dates-from-other-months/select-dates-from-other-months';
@@ -62,7 +62,7 @@ export const DEMO_COMPONENTS = [
   DemoDatepickerPlacementComponent,
   DemoDatepickerPlacementComponent,
   DemoDatepickerReactiveFormsComponent,
-  DemoDatepickerReactiveFormsComponent,
+  DemoDatePickerReturnFocusToInputComponent,
   DemoDatePickerSelectDatesFromOtherMonthsComponent,
   DemoDatePickerSelectWeekComponent,
   DemoDatePickerSelectWeekRangeComponent,

demo/src/app/components/+datepicker/demos/return-focus-to-input/return-focus-to-input.component.html

@@ -0,0 +1,16 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input
+      class="form-control"
+      placeholder="Datepicker"
+      bsDatepicker
+      [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY',  returnFocusToInput: true }">
+  </div>
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Daterangepicker"
+           class="form-control"
+           bsDaterangepicker
+           [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY',  returnFocusToInput: true }">
+  </div>
+</div>

demo/src/app/components/+datepicker/demos/return-focus-to-input/return-focus-to-input.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-datepicker-return-focus-to-input',
+  templateUrl: './return-focus-to-input.component.html'
+})
+export class DemoDatePickerReturnFocusToInputComponent {}

demo/src/ng-api-doc.ts

@@ -1037,6 +1037,12 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>Date format for date range input field</p>\n"
       },
+      {
+        "name": "returnFocusToInput",
+        "type": "boolean",
+        "defaultValue": "false",
+        "description": "<p>If true, returns focus to the datepicker / daterangepicker input after date selection</p>\n"
+      },
       {
         "name": "selectFromOtherMonth",
         "type": "boolean",

src/datepicker/bs-datepicker-input.directive.ts

@@ -115,6 +115,9 @@ export class BsDatepickerInputDirective
     /* tslint:disable-next-line: no-any*/
     this.writeValue((event.target as any).value);
     this._onChange(this._value);
+    if (this._picker._config.returnFocusToInput) {
+      this._renderer.selectRootElement(this._elRef.nativeElement).focus();
+    }
     this._onTouched();
   }
 
@@ -197,5 +200,8 @@ export class BsDatepickerInputDirective
   hide() {
     this._picker.hide();
     this._renderer.selectRootElement(this._elRef.nativeElement).blur();
+    if (this._picker._config.returnFocusToInput) {
+      this._renderer.selectRootElement(this._elRef.nativeElement).focus();
+    }
   }
 }

src/datepicker/bs-datepicker.component.ts

@@ -119,8 +119,8 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
   private _datepickerRef: ComponentRef<BsDatepickerContainerComponent>;
 
   constructor(public _config: BsDatepickerConfig,
-              _elementRef: ElementRef,
-              _renderer: Renderer2,
+              private  _elementRef: ElementRef,
+              private  _renderer: Renderer2,
               _viewContainerRef: ViewContainerRef,
               cis: ComponentLoaderFactory) {
     // todo: assign only subset of fields
@@ -219,6 +219,10 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
     for (const sub of this._subs) {
       sub.unsubscribe();
     }
+
+    if (this._config.returnFocusToInput) {
+      this._renderer.selectRootElement(this._elementRef.nativeElement).focus();
+    }
   }
 
   /**

src/datepicker/bs-datepicker.config.ts

@@ -69,6 +69,11 @@ export class BsDatepickerConfig implements DatepickerRenderOptions {
    */
   minMode?: BsDatepickerViewMode;
 
+  /**
+   * If true, returns focus to the datepicker / daterangepicker input after date selection
+   */
+  returnFocusToInput = false;
+
   /** CSS class which will be applied to datepicker container,
    * usually used to set color theme
    */

src/datepicker/bs-daterangepicker-input.directive.ts

@@ -129,6 +129,9 @@ export class BsDaterangepickerInputDirective
     /* tslint:disable-next-line: no-any*/
     this.writeValue((event.target as any).value);
     this._onChange(this._value);
+    if (this._picker._config.returnFocusToInput) {
+      this._renderer.selectRootElement(this._elRef.nativeElement).focus();
+    }
     this._onTouched();
   }
 
@@ -239,5 +242,9 @@ export class BsDaterangepickerInputDirective
   hide() {
     this._picker.hide();
     this._renderer.selectRootElement(this._elRef.nativeElement).blur();
+
+    if (this._picker._config.returnFocusToInput) {
+      this._renderer.selectRootElement(this._elRef.nativeElement).focus();
+    }
   }
 }

src/datepicker/bs-daterangepicker.component.ts

@@ -121,8 +121,8 @@ export class BsDaterangepickerDirective
   private _datepickerRef: ComponentRef<BsDaterangepickerContainerComponent>;
 
   constructor(public _config: BsDaterangepickerConfig,
-              _elementRef: ElementRef,
-              _renderer: Renderer2,
+              private  _elementRef: ElementRef,
+              private  _renderer: Renderer2,
               _viewContainerRef: ViewContainerRef,
               cis: ComponentLoaderFactory) {
     this._datepicker = cis.createLoader<BsDaterangepickerContainerComponent>(
@@ -239,7 +239,10 @@ export class BsDaterangepickerDirective
     for (const sub of this._subs) {
       sub.unsubscribe();
     }
-  }
+
+    if (this._config.returnFocusToInput) {
+      this._renderer.selectRootElement(this._elementRef.nativeElement).focus();
+    }    }
 
   /**
    * Toggles an element’s datepicker. This is considered a “manual” triggering