Merge pull request #1617 from lionel-rowe/close-popup-on-esc

Close browser popup on Escape key press

src/popup/vault/current-tab.component.html

@@ -7,7 +7,7 @@
     </div>
     <div class="search">
         <input type="{{searchTypeSearch ? 'search' : 'text'}}" placeholder="{{'searchVault' | i18n}}" id="search"
-            [(ngModel)]="searchText" (input)="searchVault()" autocomplete="off">
+            [(ngModel)]="searchText" (input)="searchVault()" autocomplete="off" (keydown)="closeOnEsc($event)">
         <i class="fa fa-search" aria-hidden="true"></i>
     </div>
     <div class="right">

src/popup/vault/current-tab.component.ts

@@ -231,4 +231,11 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
         this.loginCiphers = this.loginCiphers.sort((a, b) => this.cipherService.sortCiphersByLastUsedThenName(a, b));
         this.loaded = true;
     }
+
+    closeOnEsc(e: KeyboardEvent) {
+        // If input not empty, use browser default behavior of clearing input instead
+        if (e.key === 'Escape' && (this.searchText == null || this.searchText === '')) {
+            BrowserApi.closePopup(window);
+        }
+    }
 }

src/popup/vault/groupings.component.html

@@ -4,7 +4,7 @@
     </div>
     <div class="search">
         <input type="{{searchTypeSearch ? 'search' : 'text'}}" placeholder="{{'searchVault' | i18n}}" id="search"
-            [(ngModel)]="searchText" (input)="search(200)" autocomplete="off" appAutofocus>
+            [(ngModel)]="searchText" (input)="search(200)" autocomplete="off" appAutofocus (keydown)="closeOnEsc($event)">
         <i class="fa fa-search"></i>
     </div>
     <div class="right">

src/popup/vault/groupings.component.ts

@@ -357,4 +357,11 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
 
         return true;
     }
+
+    closeOnEsc(e: KeyboardEvent) {
+        // If input not empty, use browser default behavior of clearing input instead
+		if (e.key === 'Escape' && (this.searchText == null || this.searchText === '')) {
+            BrowserApi.closePopup(window);
+        }
+    }
 }