diff --git a/apps/browser/src/autofill/overlay/inline-menu/pages/list/__snapshots__/autofill-inline-menu-list.spec.ts.snap b/apps/browser/src/autofill/overlay/inline-menu/pages/list/__snapshots__/autofill-inline-menu-list.spec.ts.snap
index 3b8458ec2ab..acd06fb8c65 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/pages/list/__snapshots__/autofill-inline-menu-list.spec.ts.snap
+++ b/apps/browser/src/autofill/overlay/inline-menu/pages/list/__snapshots__/autofill-inline-menu-list.spec.ts.snap
@@ -681,6 +681,7 @@ exports[`AutofillInlineMenuList initAutofillInlineMenuList the list of ciphers f
class="cipher-container"
>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{
expect(autofillInlineMenuList["inlineMenuListContainer"]).toMatchSnapshot();
});
+ it("creates the view for a totp field", async () => {
+ postWindowMessage(
+ createInitAutofillInlineMenuListMessageMock({
+ inlineMenuFillType: CipherType.Login,
+ ciphers: [
+ createAutofillOverlayCipherDataMock(1, {
+ type: CipherType.Login,
+ login: {
+ totp: "123456",
+ totpField: true,
+ },
+ }),
+ ],
+ }),
+ );
+
+ await flushPromises();
+
+ const cipherSubtitleElement = autofillInlineMenuList[
+ "inlineMenuListContainer"
+ ].querySelector('[data-testid="totp-code"]');
+
+ expect(autofillInlineMenuList["inlineMenuListContainer"]).toMatchSnapshot();
+ expect(cipherSubtitleElement).not.toBeNull();
+ expect(cipherSubtitleElement.textContent).toBe("123 456");
+ });
+
it("renders correctly when there are multiple TOTP elements with username displayed", async () => {
const totpCipher1 = createAutofillOverlayCipherDataMock(1, {
type: CipherType.Login,
@@ -181,31 +208,6 @@ describe("AutofillInlineMenuList", () => {
expect(autofillInlineMenuList["inlineMenuListContainer"]).toMatchSnapshot();
});
- it("creates the view for a totp field", () => {
- postWindowMessage(
- createInitAutofillInlineMenuListMessageMock({
- inlineMenuFillType: CipherType.Login,
- ciphers: [
- createAutofillOverlayCipherDataMock(5, {
- type: CipherType.Login,
- login: {
- totp: "123456",
- totpField: true,
- },
- }),
- ],
- }),
- );
-
- const cipherSubtitleElement = autofillInlineMenuList[
- "inlineMenuListContainer"
- ].querySelector('[data-testid="totp-code"]');
-
- expect(autofillInlineMenuList["inlineMenuListContainer"]).toMatchSnapshot();
- expect(cipherSubtitleElement).not.toBeNull();
- expect(cipherSubtitleElement.textContent).toBe("123 456");
- });
-
it("creates the views for a list of card ciphers", () => {
postWindowMessage(
createInitAutofillInlineMenuListMessageMock({
diff --git a/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts b/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts
index b7837505d41..826612ecbb4 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts
@@ -412,6 +412,29 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
);
}
+ /**
+ * Filters the ciphers to include only TOTP-related ones if the field is a TOTP field.
+ * If the field is a TOTP field but no TOTP is present, it returns an empty array.
+ *
+ * @param ciphers - The list of ciphers to filter.
+ * @returns The filtered list of ciphers or an empty list if no valid TOTP ciphers are present.
+ */
+ private getFilteredCiphersForTotpField(ciphers: InlineMenuCipherData[]): InlineMenuCipherData[] {
+ if (!ciphers?.length) {
+ return [];
+ }
+
+ const isTotpField =
+ this.inlineMenuFillType === CipherType.Login &&
+ ciphers.some((cipher) => cipher.login?.totpField);
+
+ if (isTotpField) {
+ return ciphers.filter((cipher) => cipher.login?.totp);
+ }
+
+ return ciphers;
+ }
+
/**
* Updates the list items with the passed ciphers.
* If no ciphers are passed, the no results inline menu is built.
@@ -427,12 +450,12 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
return;
}
- this.ciphers = ciphers;
+ this.ciphers = this.getFilteredCiphersForTotpField(ciphers);
this.currentCipherIndex = 0;
this.showInlineMenuAccountCreation = showInlineMenuAccountCreation;
this.resetInlineMenuContainer();
- if (!ciphers?.length) {
+ if (!this.ciphers?.length) {
this.buildNoResultsInlineMenuList();
return;
}
diff --git a/apps/browser/src/autofill/spec/autofill-mocks.ts b/apps/browser/src/autofill/spec/autofill-mocks.ts
index 3a78e7f2c59..6e175906d30 100644
--- a/apps/browser/src/autofill/spec/autofill-mocks.ts
+++ b/apps/browser/src/autofill/spec/autofill-mocks.ts
@@ -241,7 +241,7 @@ export function createInitAutofillInlineMenuListMessageMock(
createAutofillOverlayCipherDataMock(4, {
icon: { imageEnabled: false, image: "", fallbackImage: "", icon: "" },
}),
- createAutofillOverlayCipherDataMock(5, { login: { totp: "123456", totpField: true } }),
+ createAutofillOverlayCipherDataMock(5),
createAutofillOverlayCipherDataMock(6),
createAutofillOverlayCipherDataMock(7),
createAutofillOverlayCipherDataMock(8),