fix(common): prevent deprecated also fixed test (datepicker close on …

…esc) for IE11 (souce tests) (#4940)

* fix(common): prevent deprecated

* fix(test): fix test related with keyCode

demo/src/app/components/+rating/demos/select-on-enter/select-on-enter.ts

@@ -10,7 +10,7 @@ export class DemoRatingSelectOnEnterComponent {
   isReadonly = false;
 
   confirmSelection(event: KeyboardEvent) {
-    if (event.keyCode === 13) {
+    if (event.keyCode === 13 || event.key === 'Enter') {
       this.isReadonly = true;
     }
   }

package.json

@@ -98,6 +98,7 @@
     "@angular/router": "6.0.1",
     "@angular/service-worker": "6.0.1",
     "@cypress/webpack-preprocessor": "3.0.1",
+    "@netbasal/spectator": "2.2.0-rc.2",
     "@nguniversal/express-engine": "6.0.0",
     "@nguniversal/module-map-ngfactory-loader": "6.0.0",
     "@schematics/angular": "0.8.5",

src/datepicker/bs-datepicker.spec.ts

@@ -4,6 +4,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { BsDatepickerConfig, BsDatepickerDirective, BsDatepickerModule } from '.';
 import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
 import { CalendarCellViewModel } from './models';
+import { dispatchKeyboardEvent } from '@netbasal/spectator';
 import { registerEscClick } from '../utils';
 
 @Component({
@@ -94,11 +95,7 @@ describe('datepicker:', () => {
       hide: () => datepicker.hide()
     });
 
-    const event = new KeyboardEvent('keyup', {
-      key: 'Escape'
-    });
-
-    document.dispatchEvent(event);
+    dispatchKeyboardEvent(document, 'keyup', 'Escape');
 
     expect(spy).toHaveBeenCalled();
   }));

src/typeahead/typeahead.directive.ts

@@ -205,35 +205,35 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
   }
 
   @HostListener('keyup', ['$event'])
-  onChange(e: KeyboardEvent): void {
+  onChange(event: KeyboardEvent): void {
     if (this._container) {
       // esc
       /* tslint:disable-next-line: deprecation */
-      if (e.keyCode === 27) {
+      if (event.keyCode === 27 || event.key === 'Escape') {
         this.hide();
 
         return;
       }
 
       // up
       /* tslint:disable-next-line: deprecation */
-      if (e.keyCode === 38) {
+      if (event.keyCode === 38 || event.key === 'ArrowUp') {
         this._container.prevActiveMatch();
 
         return;
       }
 
       // down
       /* tslint:disable-next-line: deprecation */
-      if (e.keyCode === 40) {
+      if (event.keyCode === 40 || event.key === 'ArrowDown') {
         this._container.nextActiveMatch();
 
         return;
       }
 
       // enter, tab
       /* tslint:disable-next-line: deprecation */
-      if (e.keyCode === 13) {
+      if (event.keyCode === 13 || event.key === 'Enter') {
         this._container.selectActiveMatch();
 
         return;
@@ -258,24 +258,24 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
   }
 
   @HostListener('keydown', ['$event'])
-  onKeydown(e: KeyboardEvent): void {
+  onKeydown(event: KeyboardEvent): void {
     // no container - no problems
     if (!this._container) {
       return;
     }
 
     // if an item is visible - prevent form submission
     /* tslint:disable-next-line: deprecation */
-    if (e.keyCode === 13) {
-      e.preventDefault();
+    if (event.keyCode === 13 || event.key === 'Enter') {
+      event.preventDefault();
 
       return;
     }
 
     // if an item is visible - don't change focus
     /* tslint:disable-next-line: deprecation */
-    if (e.keyCode === 9) {
-      e.preventDefault();
+    if (event.keyCode === 9 || event.key === 'Tab') {
+      event.preventDefault();
       this._container.selectActiveMatch();
 
       return;