[PM-9714] Search results should clear and results reset after navigating away from Vault tab but persist if navigating to an Item view (#10378)

* created guard to clear search text when navigating between tabs

* removed reset filter from from vault list filter component on destroy and move to guard

renamed guard to clear vault state

* Fixed bug on chip select when comparing complex objects

moved compare values function to utils

* Added comment for future reference

* moved compare values to a seperate file

* fixed lint issue

apps/browser/src/platform/services/local-backed-session-storage.service.ts

@@ -8,6 +8,7 @@ import {
   ObservableStorageService,
   StorageUpdate,
 } from "@bitwarden/common/platform/abstractions/storage.service";
+import { compareValues } from "@bitwarden/common/platform/misc/compare-values";
 import { Lazy } from "@bitwarden/common/platform/misc/lazy";
 import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
 import { StorageOptions } from "@bitwarden/common/platform/models/domain/storage-options";
@@ -190,23 +191,7 @@ export class LocalBackedSessionStorageService
 
   private compareValues<T>(value1: T, value2: T): boolean {
     try {
-      if (value1 == null && value2 == null) {
-        return true;
-      }
-
-      if (value1 && value2 == null) {
-        return false;
-      }
-
-      if (value1 == null && value2) {
-        return false;
-      }
-
-      if (typeof value1 !== "object" || typeof value2 !== "object") {
-        return value1 === value2;
-      }
-
-      return JSON.stringify(value1) === JSON.stringify(value2);
+      return compareValues(value1, value2);
     } catch (e) {
       this.logService.error(
         `error comparing values\n${JSON.stringify(value1)}\n${JSON.stringify(value2)}`,

apps/browser/src/popup/app-routing.module.ts

@@ -64,6 +64,7 @@ import { ImportBrowserV2Component } from "../tools/popup/settings/import/import-
 import { ImportBrowserComponent } from "../tools/popup/settings/import/import-browser.component";
 import { SettingsV2Component } from "../tools/popup/settings/settings-v2.component";
 import { SettingsComponent } from "../tools/popup/settings/settings.component";
+import { clearVaultStateGuard } from "../vault/guards/clear-vault-state.guard";
 import { AddEditComponent } from "../vault/popup/components/vault/add-edit.component";
 import { AttachmentsComponent } from "../vault/popup/components/vault/attachments.component";
 import { CollectionsComponent } from "../vault/popup/components/vault/collections.component";
@@ -457,6 +458,7 @@ const routes: Routes = [
       ...extensionRefreshSwap(VaultFilterComponent, VaultV2Component, {
         path: "vault",
         canActivate: [authGuard],
+        canDeactivate: [clearVaultStateGuard],
         data: { state: "tabs_vault" },
       }),
       {

apps/browser/src/vault/guards/clear-vault-state.guard.ts

@@ -0,0 +1,28 @@
+import { inject } from "@angular/core";
+import { CanDeactivateFn } from "@angular/router";
+
+import { VaultV2Component } from "../popup/components/vault/vault-v2.component";
+import { VaultPopupItemsService } from "../popup/services/vault-popup-items.service";
+import { VaultPopupListFiltersService } from "../popup/services/vault-popup-list-filters.service";
+
+/**
+ * Guard to clear the vault state (search and filter) when navigating away from the vault view.
+ * This ensures the search and filter state is reset when navigating between different tabs, except viewing a cipher.
+ */
+export const clearVaultStateGuard: CanDeactivateFn<VaultV2Component> = (
+  component: VaultV2Component,
+  currentRoute,
+  currentState,
+  nextState,
+) => {
+  const vaultPopupItemsService = inject(VaultPopupItemsService);
+  const vaultPopupListFiltersService = inject(VaultPopupListFiltersService);
+  if (nextState && !isViewingCipher(nextState.url)) {
+    vaultPopupItemsService.applyFilter("");
+    vaultPopupListFiltersService.resetFilterForm();
+  }
+
+  return true;
+};
+
+const isViewingCipher = (url: string): boolean => url.includes("view-cipher");

apps/browser/src/vault/popup/components/vault-v2/vault-list-filters/vault-list-filters.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, OnDestroy } from "@angular/core";
+import { Component } from "@angular/core";
 import { ReactiveFormsModule } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -13,7 +13,7 @@ import { VaultPopupListFiltersService } from "../../../services/vault-popup-list
   templateUrl: "./vault-list-filters.component.html",
   imports: [CommonModule, JslibModule, ChipSelectComponent, ReactiveFormsModule],
 })
-export class VaultListFiltersComponent implements OnDestroy {
+export class VaultListFiltersComponent {
   protected filterForm = this.vaultPopupListFiltersService.filterForm;
   protected organizations$ = this.vaultPopupListFiltersService.organizations$;
   protected collections$ = this.vaultPopupListFiltersService.collections$;
@@ -21,8 +21,4 @@ export class VaultListFiltersComponent implements OnDestroy {
   protected cipherTypes = this.vaultPopupListFiltersService.cipherTypes;
 
   constructor(private vaultPopupListFiltersService: VaultPopupListFiltersService) {}
-
-  ngOnDestroy(): void {
-    this.vaultPopupListFiltersService.resetFilterForm();
-  }
 }