Make Esc close popover

src/components/popover/popover.component.ts

@@ -1,6 +1,6 @@
 import {
-    Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, animate, keyframes,
-    state, style, transition, trigger
+    Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges, ViewChild,
+    animate, keyframes, state, style, transition, trigger
 } from '@angular/core';
 
 import { Store } from '@ngrx/store';
@@ -49,7 +49,7 @@ enum TabName {
             transition('opened => closed', [
                 animate('200ms ease-out', keyframes([
                     style({ transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 0 }),
-                    style({ transform: 'translateY(30px)', visibility: 'hidden', opacity: 0 , offset: 1 })
+                    style({ transform: 'translateY(30px)', visibility: 'hidden', opacity: 0, offset: 1 })
                 ]))
             ]),
             transition('closed => opened', [
@@ -143,6 +143,10 @@ export class PopoverComponent implements OnChanges {
         }
     }
 
+    @HostListener('keydown.escape') onEscape(): void {
+        this.cancel.emit();
+    }
+
     selectTab(tab: TabName): void {
         this.activeTab = tab;
     }
@@ -156,7 +160,7 @@ export class PopoverComponent implements OnChanges {
         const popover: HTMLElement = this.popoverHost.nativeElement;
         let newLeft: number = this.keyPosition.left + (this.keyPosition.width / 2);
 
-        this.leftArrow = newLeft <  offsetLeft;
+        this.leftArrow = newLeft < offsetLeft;
         this.rightArrow = (newLeft + popover.offsetWidth) > offsetLeft + this.wrapPosition.width;
 
         if (this.leftArrow) {

src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts

@@ -32,6 +32,7 @@ export class CaptureKeystrokeButtonComponent {
 
         if (this.record) {
             e.preventDefault();
+            e.stopPropagation();
             this.first = false;
 
             if (this.captureService.hasMap(code)) {

src/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -5,7 +5,7 @@
                      [keybindAnimationEnabled]="keybindAnimationEnabled"
                      (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
                      (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"></keyboard-slider>
-    <popover [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction"
+    <popover tabindex="0" [visible]="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction"
              [currentKeymap]="keymap" [currentLayer]="currentLayer" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
     <div class="tooltip bottom"
          [class.in]="tooltipData.show"

src/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -2,11 +2,13 @@ import {
     ChangeDetectionStrategy,
     Component,
     ElementRef,
+    Renderer,
     HostBinding,
     HostListener,
     Input,
     OnChanges,
     OnInit,
+    ViewChild,
     SimpleChanges
 } from '@angular/core';
 
@@ -31,6 +33,7 @@ import { camelCaseToSentence, capitalizeFirstLetter } from '../../../util';
 
 import { AppState } from '../../../store';
 import { KeymapActions } from '../../../store/actions';
+import { PopoverComponent } from '../../popover';
 
 @Component({
     selector: 'svg-keyboard-wrap',
@@ -43,6 +46,8 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     @Input() popoverEnabled: boolean = true;
     @Input() tooltipEnabled: boolean = false;
 
+    @ViewChild(PopoverComponent, { read: ElementRef}) popover: ElementRef;
+
     private popoverShown: boolean;
     private keyEditConfig: { moduleId: number, keyId: number };
     private popoverInitKeyAction: KeyAction;
@@ -70,7 +75,12 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         }
     }
 
-    constructor(private store: Store<AppState>, private mapper: MapperService, private element: ElementRef) {
+    constructor(
+        private store: Store<AppState>,
+        private mapper: MapperService,
+        private element: ElementRef,
+        private renderer: Renderer
+    ) {
         this.keyEditConfig = {
             moduleId: undefined,
             keyId: undefined
@@ -145,6 +155,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         this.keyPosition = this.keyElement.getBoundingClientRect();
         this.popoverInitKeyAction = keyAction;
         this.popoverShown = true;
+        this.renderer.invokeElementMethod(this.popover.nativeElement, 'focus');
     }
 
     showTooltip(keyAction: KeyAction, event: MouseEvent): void {