Fix stale data issue in new login popout (#17307)

* Fix stale data issue in new login popout

* Update the comments

* Address critical claude code bot suggestions

* Clean out all stale data from pop up

* Fix cached cipher issue

* Fix caching issue between tab and overlay flow

* Address claude comments

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.spec.ts

@@ -381,4 +381,88 @@ describe("AddEditV2Component", () => {
       expect(navigate).toHaveBeenCalledWith(["/tabs/vault"]);
     });
   });
+
+  describe("reloadAddEditCipherData", () => {
+    beforeEach(fakeAsync(() => {
+      addEditCipherInfo$.next({
+        cipher: {
+          name: "InitialName",
+          type: CipherType.Login,
+          login: {
+            password: "initialPassword",
+            username: "initialUsername",
+            uris: [{ uri: "https://initial.com" }],
+          },
+        },
+      } as AddEditCipherInfo);
+      queryParams$.next({});
+      tick();
+
+      cipherServiceMock.setAddEditCipherInfo.mockClear();
+    }));
+
+    it("replaces all initialValues with new data, clearing stale fields", fakeAsync(() => {
+      const newCipherInfo = {
+        cipher: {
+          name: "UpdatedName",
+          type: CipherType.Login,
+          login: {
+            password: "updatedPassword",
+            uris: [{ uri: "https://updated.com" }],
+          },
+        },
+      } as AddEditCipherInfo;
+
+      addEditCipherInfo$.next(newCipherInfo);
+
+      const messageListener = component["messageListener"];
+      messageListener({ command: "reloadAddEditCipherData" });
+      tick();
+
+      expect(component.config.initialValues).toEqual({
+        name: "UpdatedName",
+        password: "updatedPassword",
+        loginUri: "https://updated.com",
+      } as OptionalInitialValues);
+
+      expect(cipherServiceMock.setAddEditCipherInfo).toHaveBeenCalledWith(null, "UserId");
+    }));
+
+    it("does not reload data if config is not set", fakeAsync(() => {
+      component.config = null;
+
+      const messageListener = component["messageListener"];
+      messageListener({ command: "reloadAddEditCipherData" });
+      tick();
+
+      expect(cipherServiceMock.setAddEditCipherInfo).not.toHaveBeenCalled();
+    }));
+
+    it("does not reload data if latestCipherInfo is null", fakeAsync(() => {
+      addEditCipherInfo$.next(null);
+
+      const messageListener = component["messageListener"];
+      messageListener({ command: "reloadAddEditCipherData" });
+      tick();
+
+      expect(component.config.initialValues).toEqual({
+        name: "InitialName",
+        password: "initialPassword",
+        username: "initialUsername",
+        loginUri: "https://initial.com",
+      } as OptionalInitialValues);
+
+      expect(cipherServiceMock.setAddEditCipherInfo).not.toHaveBeenCalled();
+    }));
+
+    it("ignores messages with different commands", fakeAsync(() => {
+      const initialValues = component.config.initialValues;
+
+      const messageListener = component["messageListener"];
+      messageListener({ command: "someOtherCommand" });
+      tick();
+
+      expect(component.config.initialValues).toBe(initialValues);
+    }));
+  });
 });

apps/browser/src/vault/popup/components/vault-v2/add-edit/add-edit-v2.component.ts

@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, OnDestroy } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormsModule } from "@angular/forms";
 import { ActivatedRoute, Params, Router } from "@angular/router";
@@ -158,7 +158,7 @@ export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;
     IconButtonModule,
   ],
 })
-export class AddEditV2Component implements OnInit {
+export class AddEditV2Component implements OnInit, OnDestroy {
   headerText: string;
   config: CipherFormConfig;
   canDeleteCipher$: Observable<boolean>;
@@ -200,12 +200,58 @@ export class AddEditV2Component implements OnInit {
     this.subscribeToParams();
   }
 
+  private messageListener: (message: any) => void;
+
   async ngOnInit() {
     this.fido2PopoutSessionData = await firstValueFrom(this.fido2PopoutSessionData$);
 
     if (BrowserPopupUtils.inPopout(window)) {
       this.popupCloseWarningService.enable();
     }
+
+    // Listen for messages to reload cipher data when the pop up is already open
+    this.messageListener = async (message: any) => {
+      if (message?.command === "reloadAddEditCipherData") {
+        try {
+          await this.reloadCipherData();
+        } catch (error) {
+          this.logService.error("Failed to reload cipher data", error);
+        }
+      }
+    };
+    BrowserApi.addListener(chrome.runtime.onMessage, this.messageListener);
+  }
+
+  ngOnDestroy() {
+    if (this.messageListener) {
+      BrowserApi.removeListener(chrome.runtime.onMessage, this.messageListener);
+    }
+  }
+
+  /**
+   * Reloads the cipher data when the popup is already open and new form data is submitted.
+   * This completely replaces the initialValues to clear any stale data from the previous submission.
+   */
+  private async reloadCipherData() {
+    if (!this.config) {
+      return;
+    }
+
+    const activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+
+    const latestCipherInfo = await firstValueFrom(
+      this.cipherService.addEditCipherInfo$(activeUserId),
+    );
+
+    if (latestCipherInfo != null) {
+      this.config = {
+        ...this.config,
+        initialValues: mapAddEditCipherInfoToInitialValues(latestCipherInfo),
+      };
+
+      // Be sure to clear the "cached" cipher info, so it doesn't get used again
+      await this.cipherService.setAddEditCipherInfo(null, activeUserId);
+    }
   }
 
   /**

apps/browser/src/vault/popup/utils/vault-popout-window.spec.ts

@@ -2,6 +2,7 @@ import { mock } from "jest-mock-extended";
 
 import { CipherType } from "@bitwarden/common/vault/enums";
 
+import { BrowserApi } from "../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../platform/browser/browser-popup-utils";
 
 import {
@@ -23,6 +24,19 @@ describe("VaultPopoutWindow", () => {
     .spyOn(BrowserPopupUtils, "closeSingleActionPopout")
     .mockImplementation();
 
+  beforeEach(() => {
+    jest.spyOn(BrowserApi, "tabsQuery").mockResolvedValue([]);
+    jest.spyOn(BrowserApi, "updateWindowProperties").mockResolvedValue();
+    global.chrome = {
+      ...global.chrome,
+      runtime: {
+        ...global.chrome?.runtime,
+        sendMessage: jest.fn().mockResolvedValue(undefined),
+        getURL: jest.fn((path) => `chrome-extension://extension-id/${path}`),
+      },
+    };
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -123,6 +137,32 @@ describe("VaultPopoutWindow", () => {
         },
       );
     });
+
+    it("sends a message to refresh data when the popup is already open", async () => {
+      const existingPopupTab = {
+        id: 123,
+        windowId: 456,
+        url: `chrome-extension://extension-id/popup/index.html#/edit-cipher?singleActionPopout=${VaultPopoutType.addEditVaultItem}_${CipherType.Login}`,
+      } as chrome.tabs.Tab;
+
+      jest.spyOn(BrowserApi, "tabsQuery").mockResolvedValue([existingPopupTab]);
+      const sendMessageSpy = jest.spyOn(chrome.runtime, "sendMessage");
+      const updateWindowSpy = jest.spyOn(BrowserApi, "updateWindowProperties");
+
+      await openAddEditVaultItemPopout(
+        mock<chrome.tabs.Tab>({ windowId: 1, url: "https://jest-testing-website.com" }),
+        {
+          cipherType: CipherType.Login,
+        },
+      );
+
+      expect(openPopoutSpy).not.toHaveBeenCalled();
+      expect(sendMessageSpy).toHaveBeenCalledWith({
+        command: "reloadAddEditCipherData",
+        data: { cipherId: undefined, cipherType: CipherType.Login },
+      });
+      expect(updateWindowSpy).toHaveBeenCalledWith(456, { focused: true });
+    });
   });
 
   describe("closeAddEditVaultItemPopout", () => {

apps/browser/src/vault/popup/utils/vault-popout-window.ts

@@ -115,10 +115,26 @@ async function openAddEditVaultItemPopout(
     addEditCipherUrl += formatQueryString("uri", url);
   }
 
-  await BrowserPopupUtils.openPopout(addEditCipherUrl, {
-    singleActionKey,
-    senderWindowId: windowId,
-  });
+  const extensionUrl = chrome.runtime.getURL("popup/index.html");
+  const existingPopupTabs = await BrowserApi.tabsQuery({ url: `${extensionUrl}*` });
+  const existingPopup = existingPopupTabs.find((tab) =>
+    tab.url?.includes(`singleActionPopout=${singleActionKey}`),
+  );
+  // Check if the an existing popup is already open
+  try {
+    await chrome.runtime.sendMessage({
+      command: "reloadAddEditCipherData",
+      data: { cipherId, cipherType },
+    });
+    await BrowserApi.updateWindowProperties(existingPopup.windowId, {
+      focused: true,
+    });
+  } catch {
+    await BrowserPopupUtils.openPopout(addEditCipherUrl, {
+      singleActionKey,
+      senderWindowId: windowId,
+    });
+  }
 }
 
 /**