From 8d80698e3626adb2b9a3ef8bbe9c57a309ee5dd7 Mon Sep 17 00:00:00 2001
From: dgoodman-bw <109169446+dgoodman-bw@users.noreply.github.com>
Date: Thu, 13 Oct 2022 16:12:55 -0700
Subject: [PATCH] [PS-1335] problem with dropped letters keypresses when
 searching vault from browser extension debounce (#3680)

* PS-1335 - replace custom debounce with built-in debounce, extend time to 500ms

* PS-1335 - replace custom autofocus with directive

* PS-1335 - update access modifiers of observable variables
---
 .../popup/vault/current-tab.component.html    |  3 ++-
 .../src/popup/vault/current-tab.component.ts  | 21 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/browser/src/popup/vault/current-tab.component.html b/apps/browser/src/popup/vault/current-tab.component.html
index c1029abffb..f88fd2feca 100644
--- a/apps/browser/src/popup/vault/current-tab.component.html
+++ b/apps/browser/src/popup/vault/current-tab.component.html
@@ -17,9 +17,10 @@
       placeholder="{{ 'searchVault' | i18n }}"
       id="search"
       [(ngModel)]="searchText"
-      (input)="searchVault()"
+      (input)="search$.next()"
       autocomplete="off"
       (keydown)="closeOnEsc($event)"
+      appAutofocus
     />
     <i class="bwi bwi-search" aria-hidden="true"></i>
   </div>
diff --git a/apps/browser/src/popup/vault/current-tab.component.ts b/apps/browser/src/popup/vault/current-tab.component.ts
index f3e97dd233..82a2c73587 100644
--- a/apps/browser/src/popup/vault/current-tab.component.ts
+++ b/apps/browser/src/popup/vault/current-tab.component.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectorRef, Component, NgZone, OnDestroy, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
+import { Subject } from "rxjs";
+import { debounceTime, takeUntil } from "rxjs/operators";
 
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
 import { CipherService } from "@bitwarden/common/abstractions/cipher.service";
@@ -40,6 +42,8 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
   loaded = false;
   isLoading = false;
   showOrganizations = false;
+  protected search$ = new Subject<void>();
+  private destroy$ = new Subject<void>();
 
   private totpCode: string;
   private totpTimeout: number;
@@ -105,14 +109,17 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
       }, 5000);
     }
 
-    window.setTimeout(() => {
-      document.getElementById("search").focus();
-    }, 100);
+    this.search$
+      .pipe(debounceTime(500), takeUntil(this.destroy$))
+      .subscribe(() => this.searchVault());
   }
 
   ngOnDestroy() {
     window.clearTimeout(this.loadedTimeout);
     this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   async refresh() {
@@ -179,15 +186,11 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
   }
 
   searchVault() {
-    if (this.searchTimeout != null) {
-      clearTimeout(this.searchTimeout);
-    }
     if (!this.searchService.isSearchable(this.searchText)) {
       return;
     }
-    this.searchTimeout = window.setTimeout(async () => {
-      this.router.navigate(["/tabs/vault"], { queryParams: { searchText: this.searchText } });
-    }, 200);
+
+    this.router.navigate(["/tabs/vault"], { queryParams: { searchText: this.searchText } });
   }
 
   closeOnEsc(e: KeyboardEvent) {