fix: ui break when press tab key in keymap short name control (#816)

packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.html

@@ -1,5 +1,8 @@
 <div class="pull-right">
-    <div class="alert alert-warning alert-dismissible" role="alert" [@slideInOut]="slideInOut">
+    <div *ngIf="text"
+         [@slideInOut]
+         class="alert alert-warning alert-dismissible"
+         role="alert">
         <button type="button"
                 class="close"
                 aria-label="Close"

packages/uhk-web/src/app/components/undoable-notifier/undoable-notifier.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 import { Notification } from 'uhk-common';
 
@@ -9,16 +9,17 @@ import { Notification } from 'uhk-common';
     styleUrls: ['./undoable-notifier.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [
-        trigger('slideInOut', [
+        trigger(
-            state('in', style({
+            'slideInOut', [
-                transform: 'translate3d(0, 0, 0)'
+                transition(':enter', [
-            })),
+                    style({transform: 'translateX(100%)'}),
-            state('out', style({
+                    animate('400ms ease-in-out', style({transform: 'translateX(0)'}))
-                transform: 'translate3d(200%, 0, 0)'
+                ]),
-            })),
+                transition(':leave', [
-            transition('in => out', animate('400ms ease-in-out')),
+                    style({transform: 'translateX(0)'}),
-            transition('out => in', animate('400ms ease-in-out'))
+                    animate('400ms ease-in-out', style({transform: 'translateX(100%)'}))
-        ])
+                ])
+            ])
     ]
 })
 export class UndoableNotifierComponent implements OnChanges {
@@ -28,16 +29,14 @@ export class UndoableNotifierComponent implements OnChanges {
     @Output() close = new EventEmitter();
     @Output() undo = new EventEmitter();
 
-    get slideInOut() {
-        return this.notification ? 'in' : 'out';
-    }
-
     ngOnChanges(changes: SimpleChanges): void {
         if (changes['notification']) {
             const not: Notification = changes['notification'].currentValue;
             if (not) {
                 this.text = not.message;
                 this.undoable = !!not.extra;
+            } else {
+                this.text = null;
             }
         }
     }