diff --git a/apps/browser/src/popup/vault/current-tab.component.html b/apps/browser/src/popup/vault/current-tab.component.html
index c1029abffb3..f88fd2feca3 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
/>
diff --git a/apps/browser/src/popup/vault/current-tab.component.ts b/apps/browser/src/popup/vault/current-tab.component.ts
index f3e97dd233d..82a2c73587a 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();
+ private destroy$ = new Subject();
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) {