adding option (as default true) to close picker on enter - resolves 438 (#485)

* adding option (as default true) to close picker on enter - resolves 438

* adding changelog

Author: vlio20

CHANGELOG.md

@@ -3,6 +3,9 @@ All notable changes to this project will be documented in this file.
 <a name="8.0.0"></a>
 # [8.1.0] (???)
 
+### Features
+- Close popup on enter ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#438](https://github.com/vlio20/angular-datepicker/issues/438)
+
 ### Bug Fixes
 - Add debounce on open delay ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#480](https://github.com/vlio20/angular-datepicker/issues/480)
 

README.md

@@ -115,6 +115,7 @@ Here are the available configurations:
 | inputElementContainer       | `string\|HTMLElement` | `undefined`                                                               | All                       | Will place picker popup relative to the provided elemenr (if string provided will used as a selector)                                                                                                                                                                         |  
 | showGoToCurrent             | `boolean`             | `true`                                                                    | All                       | Show/Hides the go to current button on the calendars navigation                                                                                                                                                                                                               |  
 | hideOnOutsideClick          | `boolean`             | `true`                                                                    | All                       | Show/Hides the picker popup after click outside of the component                                                                                                                                                                                                              |  
+| closeOnEnter                | `boolean`             | `true`                                                                    | All                       | Hides the picker popup after enter button keypress                                                                                                                                                                                                              |  
 
 ### API:  
 In order to use the date-picker api user the `@ViewChild` annotation in the date-picker containing component class, take at the example below:    

e2e/app.po.ts

@@ -98,7 +98,8 @@ export class DemoPage {
   hideInputRadio = $('#hideInputRadio');
 
   showOnOutsideClick = $('#showOnOutsideClick');
-  hideOnOutsideClick = $('#hideOnOutsideClick');
+  enableCloseOnEnter = $('#enableCloseOnEnter');
+  disableCloseOnEnter = $('#disableCloseOnEnter');
 
   hourUpBtn = $(`${this.popupSelector} .dp-time-select-control-hours > .dp-time-select-control-up`);
   hourDownBtn = $(`${this.popupSelector} .dp-time-select-control-hours > .dp-time-select-control-down`);

e2e/fetures/enter-keydown-e2e.spec.ts

@@ -0,0 +1,25 @@
+import {DemoPage} from '../app.po';
+import {protractor} from 'protractor';
+
+describe('enter keypress', () => {
+  let page: DemoPage;
+
+  beforeEach(async () => {
+    page = new DemoPage();
+    await page.navigateTo();
+    await page.daytimePickerMenu.click();
+  });
+
+  it('should close the picker on enter keypress', async () => {
+    await page.dayPickerInput.click();
+    expect(await page.datePickerPopup.isDisplayed()).toBe(true);
+    page.dayPickerInput.sendKeys(protractor.Key.ENTER);
+    expect(await page.datePickerPopup.isDisplayed()).toBe(false);
+
+    await page.disableCloseOnEnter.click();
+    await page.dayPickerInput.click();
+    expect(await page.datePickerPopup.isDisplayed()).toBe(true);
+    page.dayPickerInput.sendKeys(protractor.Key.ENTER);
+    expect(await page.datePickerPopup.isDisplayed()).toBe(true);
+  });
+});

…demo/date-pickers/common/conts/consts.ts src/demo/demo/common/conts/consts.tssrc/demo/demo/date-pickers/common/conts/consts.ts renamed to src/demo/demo/common/conts/consts.ts src/demo/demo/date-pickers/common/conts/consts.ts renamed to src/demo/demo/common/conts/consts.ts

@@ -1,4 +1,4 @@
-import {ECalendarValue, IDatePickerConfig} from '../../../../../lib';
+import {ECalendarValue, IDatePickerConfig} from '../../../../lib';
 import * as moment from 'moment';
 
 export const DEF_CONF: IDatePickerConfig = {
@@ -11,6 +11,7 @@ export const DEF_CONF: IDatePickerConfig = {
   openOnFocus: true,
   openOnClick: true,
   onOpenDelay: 0,
+  closeOnEnter: true,
   weekDayFormat: 'ddd',
   appendTo: document.body,
   showNearMonthDays: true,

…ckers/common/date-component.component.ts …/demo/common/date-component.component.tssrc/demo/demo/date-pickers/common/date-component.component.ts renamed to src/demo/demo/common/date-component.component.ts src/demo/demo/date-pickers/common/date-component.component.ts renamed to src/demo/demo/common/date-component.component.ts

@@ -1,7 +1,7 @@
-import {INavEvent} from '../../../../lib/common/models/navigation-event.model';
+import {INavEvent} from '../../../lib/common/models/navigation-event.model';
 import * as moment from 'moment';
 import {Moment} from 'moment';
-import {DatePickerComponent, DatePickerDirective, ISelectionEvent} from '../../../../lib';
+import {DatePickerComponent, DatePickerDirective, ISelectionEvent} from '../../../lib';
 import {ViewChild} from '@angular/core';
 import {FormControl, ValidatorFn, Validators} from '@angular/forms';
 

src/demo/demo/config-form/config-form.component.html

@@ -797,6 +797,28 @@ <h3 class="dp-options-section">Config options</h3>
         </select>
       </div>
     </div>
+
+    <div *ngIf="isValidConfig('closeOnEnter')" class="dp-option">
+        <span class="dp-option-header">
+          Close On Enter (closeOnEnter):
+        </span>
+      <div class="dp-option-playground">
+        <label>Enabled
+          <input id="enableCloseOnEnter"
+                 [formControl]="closeOnEnter"
+                 [value]="true"
+                 name="closeOnEnter"
+                 type="radio">
+        </label>
+        <label>Disabled
+          <input id="disableCloseOnEnter"
+                 [formControl]="closeOnEnter"
+                 [value]="false"
+                 name="closeOnEnter"
+                 type="radio">
+        </label>
+      </div>
+    </div>
   </div>
 
   <div class="dp-api">

src/demo/demo/config-form/config-form.component.ts

@@ -25,7 +25,8 @@ const PICKER_OPTION_KEYS = [
   'placeholder',
   'required',
   'hideInputContainer',
-  'hideOnOutsideClick'
+  'hideOnOutsideClick',
+  'closeOnEnter'
 ];
 const DAY_PICKER_DIRECTIVE_OPTION_KEYS = [
   'allowMultiSelect',
@@ -219,6 +220,7 @@ export class ConfigFormComponent implements OnInit {
   showMultipleYearsNavigation: FormControl;
   multipleYearsNavigateBy: FormControl;
   returnedValueType: FormControl;
+  closeOnEnter: FormControl;
 
   ngOnInit() {
     this.localFormat = this.getDefaultFormatByMode(this.pickerMode);
@@ -264,6 +266,7 @@ export class ConfigFormComponent implements OnInit {
     this.showMultipleYearsNavigation = new FormControl(this.config.showMultipleYearsNavigation);
     this.multipleYearsNavigateBy = new FormControl(this.config.multipleYearsNavigateBy);
     this.returnedValueType = new FormControl(this.config.returnedValueType);
+    this.closeOnEnter = new FormControl(this.config.closeOnEnter);
     this.initListeners();
   }
 
@@ -609,6 +612,12 @@ export class ConfigFormComponent implements OnInit {
         returnedValueType: val
       });
     });
+
+    this.closeOnEnter.valueChanges.subscribe((val) => {
+      this.onConfigChange.emit({
+        closeOnEnter: val
+      });
+    });
   }
 
   private getDefaultFormatByMode(mode: string): string {

src/demo/demo/date-pickers/day-time/day-time-demo/day-time-demo.component.ts

@@ -1,8 +1,8 @@
 import {Component, OnInit} from '@angular/core';
-import {DateComponent} from '../../common/date-component.component';
+import {DateComponent} from '../../../common/date-component.component';
 import {FormControl} from '@angular/forms';
 import {IDatePickerConfig} from '../../../../../lib';
-import {DEF_CONF} from '../../common/conts/consts';
+import {DEF_CONF} from '../../../common/conts/consts';
 
 @Component({
   selector: 'dp-day-time-demo',

src/demo/demo/date-pickers/day-time/day-time-directive-demo/day-time-directive-demo.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
-import {DateComponent} from '../../common/date-component.component';
+import {DateComponent} from '../../../common/date-component.component';
 import {FormControl} from '@angular/forms';
-import {DEF_CONF} from '../../common/conts/consts';
+import {DEF_CONF} from '../../../common/conts/consts';
 import {IDatePickerConfig} from '../../../../../lib';
 
 @Component({