From 5d17d9ee718aba156b071493e8f57c98eed072cd Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Mon, 2 Feb 2026 09:37:02 -0800
Subject: [PATCH] Revert "[PM-26703]- Browser - Update autofill Behavior
 (#18467)" (#18723)

This reverts commit 7b583aa0ecf865472d67b2a61a56cb064d31a2b7.
---
 .../autofill-vault-list-items.component.html  |  3 +-
 .../autofill-vault-list-items.component.ts    |  8 +-
 .../item-more-options.component.html          |  4 +-
 .../item-more-options.component.ts            | 18 +++-
 .../vault-list-items-container.component.html | 22 +++--
 .../vault-list-items-container.component.ts   | 87 ++++++++++++++-----
 .../settings/appearance-v2.component.html     |  8 +-
 .../settings/appearance-v2.component.spec.ts  | 14 ++-
 .../popup/settings/appearance-v2.component.ts | 15 ++++
 .../vault-settings/vault-settings.service.ts  | 11 +++
 .../key-state/vault-settings.state.ts         |  9 ++
 .../vault-settings/vault-settings.service.ts  | 21 ++++-
 12 files changed, 181 insertions(+), 39 deletions(-)

diff --git a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html
index 0e9a12b504e..47ef0284d6a 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.html
@@ -5,7 +5,8 @@
   [showRefresh]="showRefresh"
   (onRefresh)="refreshCurrentTab()"
   [description]="(showEmptyAutofillTip$ | async) ? ('autofillSuggestionsTip' | i18n) : undefined"
-  isAutofillList
+  showAutofillButton
   [disableDescriptionMargin]="showEmptyAutofillTip$ | async"
+  [primaryActionAutofill]="clickItemsToAutofillVaultView$ | async"
   [groupByType]="groupByType()"
 ></app-vault-list-items-container>
diff --git a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
index adb4e6b6866..64f662ab840 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/autofill-vault-list-items/autofill-vault-list-items.component.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
-import { combineLatest, map, Observable } from "rxjs";
+import { combineLatest, map, Observable, startWith } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
@@ -42,6 +42,12 @@ export class AutofillVaultListItemsComponent {
    */
   protected showRefresh: boolean = BrowserPopupUtils.inSidebar(window);
 
+  /** Flag indicating whether the login item should automatically autofill when clicked  */
+  protected clickItemsToAutofillVaultView$: Observable<boolean> =
+    this.vaultSettingsService.clickItemsToAutofillVaultView$.pipe(
+      startWith(true), // Start with true to avoid flashing the fill button on first load
+    );
+
   protected readonly groupByType = toSignal(
     this.vaultPopupItemsService.hasFilterApplied$.pipe(map((hasFilter) => !hasFilter)),
   );
diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
index 223029aed0a..be67869d3df 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.html
@@ -8,14 +8,14 @@
   ></button>
   <bit-menu #moreOptions>
     @if (!decryptionFailure) {
-      <ng-container *ngIf="canAutofill && showAutofill()">
+      <ng-container *ngIf="canAutofill && !hideAutofillOptions">
         <ng-container *ngIf="autofillAllowed$ | async">
           <button type="button" bitMenuItem (click)="doAutofill()">
             {{ "autofill" | i18n }}
           </button>
         </ng-container>
       </ng-container>
-      <ng-container>
+      <ng-container *ngIf="showViewOption">
         <button type="button" bitMenuItem (click)="onView()">
           {{ "view" | i18n }}
         </button>
diff --git a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
index 7a6c1db8026..d7de51ad20f 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/item-more-options/item-more-options.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { booleanAttribute, Component, input, Input } from "@angular/core";
+import { booleanAttribute, Component, Input } from "@angular/core";
 import { Router, RouterModule } from "@angular/router";
 import { BehaviorSubject, combineLatest, firstValueFrom, map, Observable, switchMap } from "rxjs";
 import { filter } from "rxjs/operators";
@@ -76,10 +76,22 @@ export class ItemMoreOptionsComponent {
   }
 
   /**
-   * Flag to show the autofill menu options. Used for items that are
+   * Flag to show view item menu option. Used when something else is
+   * assigned as the primary action for the item, such as autofill.
+   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input({ transform: booleanAttribute })
+  showViewOption = false;
+
+  /**
+   * Flag to hide the autofill menu options. Used for items that are
    * already in the autofill list suggestion.
    */
-  readonly showAutofill = input(false, { transform: booleanAttribute });
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input({ transform: booleanAttribute })
+  hideAutofillOptions = false;
 
   protected autofillAllowed$ = this.vaultPopupAutofillService.autofillAllowed$;
 
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
index d3bc025905e..3dac158b8e1 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
@@ -90,11 +90,11 @@
       </ng-container>
 
       <cdk-virtual-scroll-viewport [itemSize]="itemHeight$ | async" bitScrollLayout>
-        <bit-item *cdkVirtualFor="let cipher of group.ciphers" class="tw-group/vault-item">
+        <bit-item *cdkVirtualFor="let cipher of group.ciphers">
           <button
             bit-item-content
             type="button"
-            (click)="onCipherSelect(cipher)"
+            (click)="primaryActionOnSelect(cipher)"
             (dblclick)="launchCipher(cipher)"
             [appA11yTitle]="
               cipherItemTitleKey()(cipher)
@@ -125,14 +125,19 @@
           </button>
 
           <ng-container slot="end">
-            <bit-item-action *ngIf="isAutofillList()">
-              <span
-                class="tw-opacity-0 tw-text-sm tw-text-primary-600 tw-px-2 group-hover/vault-item:tw-opacity-100 group-focus-within/vault-item:tw-opacity-100"
+            <bit-item-action *ngIf="!hideAutofillButton()">
+              <button
+                type="button"
+                bitBadge
+                variant="primary"
+                (click)="doAutofill(cipher)"
+                [title]="autofillShortcutTooltip() ?? ('autofillTitle' | i18n: cipher.name)"
+                [attr.aria-label]="'autofillTitle' | i18n: cipher.name"
               >
                 {{ "fill" | i18n }}
-              </span>
+              </button>
             </bit-item-action>
-            <bit-item-action *ngIf="!isAutofillList() && CipherViewLikeUtils.canLaunch(cipher)">
+            <bit-item-action *ngIf="!showAutofillButton() && CipherViewLikeUtils.canLaunch(cipher)">
               <button
                 type="button"
                 bitIconButton="bwi-external-link"
@@ -144,7 +149,8 @@
             <app-item-copy-actions [cipher]="cipher"></app-item-copy-actions>
             <app-item-more-options
               [cipher]="cipher"
-              [showAutofill]="!isAutofillList()"
+              [hideAutofillOptions]="hideAutofillMenuOptions()"
+              [showViewOption]="primaryActionAutofill()"
             ></app-item-more-options>
           </ng-container>
         </bit-item>
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
index 6e867910d1a..469247f9692 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
@@ -136,18 +136,24 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
    */
   private viewCipherTimeout?: number;
 
-  readonly ciphers = input<PopupCipherViewLike[]>([]);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  ciphers = input<PopupCipherViewLike[]>([]);
 
   /**
    * If true, we will group ciphers by type (Login, Card, Identity)
    * within subheadings in a single container, converted to a WritableSignal.
    */
-  readonly groupByType = input<boolean | undefined>(false);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  groupByType = input<boolean | undefined>(false);
 
   /**
    * Computed signal for a grouped list of ciphers with an optional header
    */
-  readonly cipherGroups = computed<
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  cipherGroups = computed<
     {
       subHeaderKey?: string;
       ciphers: PopupCipherViewLike[];
@@ -189,7 +195,9 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
   /**
    * Title for the vault list item section.
    */
-  readonly title = input<string | undefined>(undefined);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  title = input<string | undefined>(undefined);
 
   /**
    * Optionally allow the items to be collapsed.
@@ -197,20 +205,24 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
    * The key must be added to the state definition in `vault-popup-section.service.ts` since the
    * collapsed state is stored locally.
    */
-  readonly collapsibleKey = input<keyof PopupSectionOpen | undefined>(undefined);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  collapsibleKey = input<keyof PopupSectionOpen | undefined>(undefined);
 
   /**
    * Optional description for the vault list item section. Will be shown below the title even when
    * no ciphers are available.
    */
-
-  readonly description = input<string | undefined>(undefined);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  description = input<string | undefined>(undefined);
 
   /**
    * Option to show a refresh button in the section header.
    */
-
-  readonly showRefresh = input(false, { transform: booleanAttribute });
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  showRefresh = input(false, { transform: booleanAttribute });
 
   /**
    * Event emitted when the refresh button is clicked.
@@ -223,16 +235,23 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
   /**
    * Flag indicating that the current tab location is blocked
    */
-  readonly currentUriIsBlocked = toSignal(this.vaultPopupAutofillService.currentTabIsOnBlocklist$);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  currentURIIsBlocked = toSignal(this.vaultPopupAutofillService.currentTabIsOnBlocklist$);
 
   /**
    * Resolved i18n key to use for suggested cipher items
    */
-  readonly cipherItemTitleKey = computed(() => {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  cipherItemTitleKey = computed(() => {
     return (cipher: CipherViewLike) => {
       const login = CipherViewLikeUtils.getLogin(cipher);
       const hasUsername = login?.username != null;
-      const key = !this.currentUriIsBlocked() ? "autofillTitle" : "viewItemTitle";
+      const key =
+        this.primaryActionAutofill() && !this.currentURIIsBlocked()
+          ? "autofillTitle"
+          : "viewItemTitle";
       return hasUsername ? `${key}WithField` : key;
     };
   });
@@ -240,25 +259,47 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
   /**
    * Option to show the autofill button for each item.
    */
-  readonly isAutofillList = input(false, { transform: booleanAttribute });
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  showAutofillButton = input(false, { transform: booleanAttribute });
 
   /**
-   * Computed property whether the cipher select action should perform autofill
+   * Flag indicating whether the suggested cipher item autofill button should be shown or not
    */
-  readonly shouldAutofillOnSelect = computed(
-    () => this.isAutofillList() && !this.currentUriIsBlocked(),
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  hideAutofillButton = computed(
+    () => !this.showAutofillButton() || this.currentURIIsBlocked() || this.primaryActionAutofill(),
   );
 
+  /**
+   * Flag indicating whether the cipher item autofill menu options should be shown or not
+   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  hideAutofillMenuOptions = computed(() => this.currentURIIsBlocked() || this.showAutofillButton());
+
+  /**
+   * Option to perform autofill operation as the primary action for autofill suggestions.
+   */
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  primaryActionAutofill = input(false, { transform: booleanAttribute });
+
   /**
    * Remove the bottom margin from the bit-section in this component
    * (used for containers at the end of the page where bottom margin is not needed)
    */
-  readonly disableSectionMargin = input(false, { transform: booleanAttribute });
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  disableSectionMargin = input(false, { transform: booleanAttribute });
 
   /**
    * Remove the description margin
    */
-  readonly disableDescriptionMargin = input(false, { transform: booleanAttribute });
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  disableDescriptionMargin = input(false, { transform: booleanAttribute });
 
   /**
    * The tooltip text for the organization icon for ciphers that belong to an organization.
@@ -272,7 +313,9 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
     return collections[0]?.name;
   }
 
-  protected readonly autofillShortcutTooltip = signal<string | undefined>(undefined);
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  protected autofillShortcutTooltip = signal<string | undefined>(undefined);
 
   constructor(
     private i18nService: I18nService,
@@ -297,8 +340,10 @@ export class VaultListItemsContainerComponent implements AfterViewInit {
     }
   }
 
-  onCipherSelect(cipher: PopupCipherViewLike) {
-    return this.shouldAutofillOnSelect() ? this.doAutofill(cipher) : this.onViewCipher(cipher);
+  primaryActionOnSelect(cipher: PopupCipherViewLike) {
+    return this.primaryActionAutofill() && !this.currentURIIsBlocked()
+      ? this.doAutofill(cipher)
+      : this.onViewCipher(cipher);
   }
 
   /**
diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.html b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
index d53db1d74c2..b58316a8d64 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.html
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.html
@@ -50,10 +50,16 @@
           <vault-permit-cipher-details-popover></vault-permit-cipher-details-popover>
         </bit-label>
       </bit-form-control>
-      <bit-form-control disableMargin>
+      <bit-form-control>
         <input bitCheckbox formControlName="showQuickCopyActions" type="checkbox" />
         <bit-label>{{ "showQuickCopyActions" | i18n }}</bit-label>
       </bit-form-control>
+      <bit-form-control disableMargin>
+        <input bitCheckbox formControlName="clickItemsToAutofillVaultView" type="checkbox" />
+        <bit-label>
+          {{ "clickToAutofill" | i18n }}
+        </bit-label>
+      </bit-form-control>
     </bit-card>
   </form>
 </popup-page>
diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
index 40fbc4b7aa6..9e1beab5787 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
@@ -59,12 +59,14 @@ describe("AppearanceV2Component", () => {
   const enableRoutingAnimation$ = new BehaviorSubject<boolean>(true);
   const enableCompactMode$ = new BehaviorSubject<boolean>(false);
   const showQuickCopyActions$ = new BehaviorSubject<boolean>(false);
+  const clickItemsToAutofillVaultView$ = new BehaviorSubject<boolean>(false);
   const setSelectedTheme = jest.fn().mockResolvedValue(undefined);
   const setShowFavicons = jest.fn().mockResolvedValue(undefined);
   const setEnableBadgeCounter = jest.fn().mockResolvedValue(undefined);
   const setEnableRoutingAnimation = jest.fn().mockResolvedValue(undefined);
   const setEnableCompactMode = jest.fn().mockResolvedValue(undefined);
   const setShowQuickCopyActions = jest.fn().mockResolvedValue(undefined);
+  const setClickItemsToAutofillVaultView = jest.fn().mockResolvedValue(undefined);
 
   const mockWidthService: Partial<PopupSizeService> = {
     width$: new BehaviorSubject("default"),
@@ -111,7 +113,10 @@ describe("AppearanceV2Component", () => {
         },
         {
           provide: VaultSettingsService,
-          useValue: mock<VaultSettingsService>(),
+          useValue: {
+            clickItemsToAutofillVaultView$,
+            setClickItemsToAutofillVaultView,
+          },
         },
       ],
     })
@@ -142,6 +147,7 @@ describe("AppearanceV2Component", () => {
       enableCompactMode: false,
       showQuickCopyActions: false,
       width: "default",
+      clickItemsToAutofillVaultView: false,
     });
   });
 
@@ -187,5 +193,11 @@ describe("AppearanceV2Component", () => {
 
       expect(mockWidthService.setWidth).toHaveBeenCalledWith("wide");
     });
+
+    it("updates the click items to autofill vault view setting", () => {
+      component.appearanceForm.controls.clickItemsToAutofillVaultView.setValue(true);
+
+      expect(setClickItemsToAutofillVaultView).toHaveBeenCalledWith(true);
+    });
   });
 });
diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
index 1e0ad517851..e02ccf25f3e 100644
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
@@ -66,6 +66,7 @@ export class AppearanceV2Component implements OnInit {
     enableCompactMode: false,
     showQuickCopyActions: false,
     width: "default" as PopupWidthOption,
+    clickItemsToAutofillVaultView: false,
   });
 
   /** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */
@@ -111,6 +112,9 @@ export class AppearanceV2Component implements OnInit {
       this.copyButtonsService.showQuickCopyActions$,
     );
     const width = await firstValueFrom(this.popupSizeService.width$);
+    const clickItemsToAutofillVaultView = await firstValueFrom(
+      this.vaultSettingsService.clickItemsToAutofillVaultView$,
+    );
 
     // Set initial values for the form
     this.appearanceForm.setValue({
@@ -121,6 +125,7 @@ export class AppearanceV2Component implements OnInit {
       enableCompactMode,
       showQuickCopyActions,
       width,
+      clickItemsToAutofillVaultView,
     });
 
     this.formLoading = false;
@@ -166,6 +171,16 @@ export class AppearanceV2Component implements OnInit {
       .subscribe((width) => {
         void this.updateWidth(width);
       });
+
+    this.appearanceForm.controls.clickItemsToAutofillVaultView.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((clickItemsToAutofillVaultView) => {
+        void this.updateClickItemsToAutofillVaultView(clickItemsToAutofillVaultView);
+      });
+  }
+
+  async updateClickItemsToAutofillVaultView(clickItemsToAutofillVaultView: boolean) {
+    await this.vaultSettingsService.setClickItemsToAutofillVaultView(clickItemsToAutofillVaultView);
   }
 
   async updateFavicon(enableFavicon: boolean) {
diff --git a/libs/common/src/vault/abstractions/vault-settings/vault-settings.service.ts b/libs/common/src/vault/abstractions/vault-settings/vault-settings.service.ts
index 7a91d97ec7f..01b0011b7f7 100644
--- a/libs/common/src/vault/abstractions/vault-settings/vault-settings.service.ts
+++ b/libs/common/src/vault/abstractions/vault-settings/vault-settings.service.ts
@@ -16,6 +16,11 @@ export abstract class VaultSettingsService {
    * An observable monitoring the state of the show identities on the current tab.
    */
   abstract showIdentitiesCurrentTab$: Observable<boolean>;
+  /**
+   * An observable monitoring the state of the click items on the Vault view
+   * for Autofill suggestions.
+   */
+  abstract clickItemsToAutofillVaultView$: Observable<boolean>;
 
   /**
    * Saves the enable passkeys setting to disk.
@@ -32,4 +37,10 @@ export abstract class VaultSettingsService {
    * @param value The new value for the show identities on tab page setting.
    */
   abstract setShowIdentitiesCurrentTab(value: boolean): Promise<void>;
+  /**
+   * Saves the click items on vault View for Autofill suggestions to disk.
+   * @param value The new value for the click items on vault View for
+   * Autofill suggestions setting.
+   */
+  abstract setClickItemsToAutofillVaultView(value: boolean): Promise<void>;
 }
diff --git a/libs/common/src/vault/services/key-state/vault-settings.state.ts b/libs/common/src/vault/services/key-state/vault-settings.state.ts
index 21364bbbf8e..35bb776cc96 100644
--- a/libs/common/src/vault/services/key-state/vault-settings.state.ts
+++ b/libs/common/src/vault/services/key-state/vault-settings.state.ts
@@ -25,3 +25,12 @@ export const SHOW_IDENTITIES_CURRENT_TAB = new UserKeyDefinition<boolean>(
     clearOn: [], // do not clear user settings
   },
 );
+
+export const CLICK_ITEMS_AUTOFILL_VAULT_VIEW = new UserKeyDefinition<boolean>(
+  VAULT_SETTINGS_DISK,
+  "clickItemsToAutofillOnVaultView",
+  {
+    deserializer: (obj) => obj,
+    clearOn: [], // do not clear user settings
+  },
+);
diff --git a/libs/common/src/vault/services/vault-settings/vault-settings.service.ts b/libs/common/src/vault/services/vault-settings/vault-settings.service.ts
index 098ca5faf2c..dbdb3a58dcc 100644
--- a/libs/common/src/vault/services/vault-settings/vault-settings.service.ts
+++ b/libs/common/src/vault/services/vault-settings/vault-settings.service.ts
@@ -1,4 +1,4 @@
-import { Observable, combineLatest, map } from "rxjs";
+import { Observable, combineLatest, map, shareReplay } from "rxjs";
 
 import { ActiveUserState, GlobalState, StateProvider } from "../../../platform/state";
 import { VaultSettingsService as VaultSettingsServiceAbstraction } from "../../abstractions/vault-settings/vault-settings.service";
@@ -7,6 +7,7 @@ import {
   SHOW_CARDS_CURRENT_TAB,
   SHOW_IDENTITIES_CURRENT_TAB,
   USER_ENABLE_PASSKEYS,
+  CLICK_ITEMS_AUTOFILL_VAULT_VIEW,
 } from "../key-state/vault-settings.state";
 import { RestrictedItemTypesService } from "../restricted-item-types.service";
 
@@ -48,6 +49,17 @@ export class VaultSettingsService implements VaultSettingsServiceAbstraction {
   readonly showIdentitiesCurrentTab$: Observable<boolean> =
     this.showIdentitiesCurrentTabState.state$.pipe(map((x) => x ?? true));
 
+  private clickItemsToAutofillVaultViewState: ActiveUserState<boolean> =
+    this.stateProvider.getActive(CLICK_ITEMS_AUTOFILL_VAULT_VIEW);
+  /**
+   * {@link VaultSettingsServiceAbstraction.clickItemsToAutofillVaultView$$}
+   */
+  readonly clickItemsToAutofillVaultView$: Observable<boolean> =
+    this.clickItemsToAutofillVaultViewState.state$.pipe(
+      map((x) => x ?? false),
+      shareReplay({ bufferSize: 1, refCount: false }),
+    );
+
   constructor(
     private stateProvider: StateProvider,
     private restrictedItemTypesService: RestrictedItemTypesService,
@@ -67,6 +79,13 @@ export class VaultSettingsService implements VaultSettingsServiceAbstraction {
     await this.showIdentitiesCurrentTabState.update(() => value);
   }
 
+  /**
+   * {@link VaultSettingsServiceAbstraction.setClickItemsToAutofillVaultView}
+   */
+  async setClickItemsToAutofillVaultView(value: boolean): Promise<void> {
+    await this.clickItemsToAutofillVaultViewState.update(() => value);
+  }
+
   /**
    * {@link VaultSettingsServiceAbstraction.setEnablePasskeys}
    */