Fixed graphical glitch

src/components/popover/tab/keymap/keymap-tab.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
 
 import { Select2OptionData } from 'ng2-select2/ng2-select2';
 
@@ -12,7 +12,7 @@ import { Tab } from '../tab';
     styles: [require('./keymap-tab.component.scss')],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class KeymapTabComponent implements OnInit, Tab {
+export class KeymapTabComponent implements OnInit, OnChanges, Tab {
     @Input() defaultKeyAction: KeyAction;
     @Input() keymaps: Keymap[];
 
@@ -34,6 +34,9 @@ export class KeymapTabComponent implements OnInit, Tab {
         if (this.keymaps.length > 0) {
             this.selectedKeymap = this.keymaps[0];
         }
+    }
+
+    ngOnChanges() {
         this.fromKeyAction(this.defaultKeyAction);
     }
 

src/components/popover/tab/keypress/keypress-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 
 import { Select2OptionData } from 'ng2-select2/ng2-select2';
 
@@ -11,7 +11,7 @@ import { Tab } from '../tab';
     template: require('./keypress-tab.component.html'),
     styles: [require('./keypress-tab.component.scss')]
 })
-export class KeypressTabComponent implements OnInit, Tab {
+export class KeypressTabComponent implements OnChanges, Tab {
     @Input() defaultKeyAction: KeyAction;
     @Input() longPressEnabled: boolean;
 
@@ -42,7 +42,7 @@ export class KeypressTabComponent implements OnInit, Tab {
         this.selectedLongPressIndex = -1;
     }
 
-    ngOnInit() {
+    ngOnChanges() {
         this.fromKeyAction(this.defaultKeyAction);
     }
 

src/components/popover/tab/layer/layer-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input,  OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnChanges, ViewChild } from '@angular/core';
 
 import { KeyAction, LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/key-action';
 
@@ -11,7 +11,7 @@ import { Tab } from '../tab';
     template: require('./layer-tab.component.html'),
     styles: [require('./layer-tab.component.scss')]
 })
-export class LayerTabComponent implements OnInit, Tab {
+export class LayerTabComponent implements OnChanges, Tab {
     @Input() defaultKeyAction: KeyAction;
     @ViewChild('toggleSelect') toggleSelect2: Select2Component;
     @ViewChild('layerSelect') layerSelect2: Select2Component;
@@ -52,7 +52,7 @@ export class LayerTabComponent implements OnInit, Tab {
         this.layer = LayerName.mod;
     }
 
-    ngOnInit() {
+    ngOnChanges() {
         this.fromKeyAction(this.defaultKeyAction);
     }
 

src/components/popover/tab/macro/macro-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -19,7 +19,7 @@ import { getMacroEntities } from '../../../../store/reducers/macro';
     template: require('./macro-tab.component.html'),
     styles: [require('./macro-tab.component.scss')]
 })
-export class MacroTabComponent implements OnInit, OnDestroy, Tab {
+export class MacroTabComponent implements OnInit, OnChanges, OnDestroy, Tab {
     @Input() defaultKeyAction: KeyAction;
 
     private macros: Macro[];
@@ -41,6 +41,9 @@ export class MacroTabComponent implements OnInit, OnDestroy, Tab {
                 text: macro.name
             };
         });
+    }
+
+    ngOnChanges() {
         this.fromKeyAction(this.defaultKeyAction);
     }
 

src/components/popover/tab/mouse/mouse-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 
 import { KeyAction, MouseAction, MouseActionParam } from '../../../../config-serializer/config-items/key-action';
 import { Tab } from '../tab';
@@ -8,7 +8,7 @@ import { Tab } from '../tab';
     template: require('./mouse-tab.component.html'),
     styles: [require('./mouse-tab.component.scss')]
 })
-export class MouseTabComponent implements OnInit, Tab {
+export class MouseTabComponent implements OnChanges, Tab {
     @Input() defaultKeyAction: KeyAction;
 
     private mouseActionParam: MouseActionParam;
@@ -25,7 +25,7 @@ export class MouseTabComponent implements OnInit, Tab {
         this.pages = ['Move', 'Scroll', 'Click', 'Speed'];
     }
 
-    ngOnInit() {
+    ngOnChanges() {
         this.fromKeyAction(this.defaultKeyAction);
     }
 

src/components/popover/tab/none/none-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { Tab } from '../tab';
 
@@ -7,11 +7,7 @@ import { Tab } from '../tab';
     template: require('./none-tab.component.html'),
     styles: [require('./none-tab.component.scss')]
 })
-export class NoneTabComponent implements OnInit, Tab {
-    constructor() { }
-
-    ngOnInit() { }
-
+export class NoneTabComponent implements Tab {
     keyActionValid(): boolean {
         return true;
     }