From e555d263f1e8a66674f427b9aa9be75f99b488c4 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Sun, 3 Sep 2023 15:45:57 -0400
Subject: [PATCH 1/4] close menu overlay when no longer visible

---
 libs/components/src/menu/menu-trigger-for.directive.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/libs/components/src/menu/menu-trigger-for.directive.ts b/libs/components/src/menu/menu-trigger-for.directive.ts
index 06f11a03b3f4..278bce718650 100644
--- a/libs/components/src/menu/menu-trigger-for.directive.ts
+++ b/libs/components/src/menu/menu-trigger-for.directive.ts
@@ -31,7 +31,13 @@ export class MenuTriggerForDirective implements OnDestroy {
     panelClass: "bit-menu-panel",
     hasBackdrop: true,
     backdropClass: "cdk-overlay-transparent-backdrop",
-    scrollStrategy: this.overlay.scrollStrategies.reposition(),
+    scrollStrategy: this.overlay.scrollStrategies.reposition({
+      /**
+       * Autoclosing is required to properly track position in virtual scroll viewports.
+       * @see https://bitwarden.atlassian.net/browse/CL-104
+       */
+      autoClose: true,
+    }),
     positionStrategy: this.overlay
       .position()
       .flexibleConnectedTo(this.elementRef)

From 4406e4e31867e035a0deb01d421336f8af69418f Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Sun, 3 Sep 2023 15:46:56 -0400
Subject: [PATCH 2/4] prevent infinite loop in fallback-src directive

---
 libs/angular/src/directives/fallback-src.directive.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/libs/angular/src/directives/fallback-src.directive.ts b/libs/angular/src/directives/fallback-src.directive.ts
index 11bce2052b7d..082c8534fa31 100644
--- a/libs/angular/src/directives/fallback-src.directive.ts
+++ b/libs/angular/src/directives/fallback-src.directive.ts
@@ -6,9 +6,15 @@ import { Directive, ElementRef, HostListener, Input } from "@angular/core";
 export class FallbackSrcDirective {
   @Input("appFallbackSrc") appFallbackSrc: string;
 
+  /** Only try setting the fallback once. This prevents an infinite loop if the fallback itself is missing. */
+  private tryFallback = true;
+
   constructor(private el: ElementRef) {}
 
   @HostListener("error") onError() {
-    this.el.nativeElement.src = this.appFallbackSrc;
+    if (this.tryFallback) {
+      this.el.nativeElement.src = this.appFallbackSrc;
+      this.tryFallback = false;
+    }
   }
 }

From 92c271deed6d6e0260fd833edee66cc9f34fd6f0 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Tue, 5 Sep 2023 18:56:13 -0400
Subject: [PATCH 3/4] block scrolling when menu is open

---
 .../src/menu/menu-trigger-for.directive.ts           | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/libs/components/src/menu/menu-trigger-for.directive.ts b/libs/components/src/menu/menu-trigger-for.directive.ts
index 278bce718650..5d10f88a7235 100644
--- a/libs/components/src/menu/menu-trigger-for.directive.ts
+++ b/libs/components/src/menu/menu-trigger-for.directive.ts
@@ -31,13 +31,11 @@ export class MenuTriggerForDirective implements OnDestroy {
     panelClass: "bit-menu-panel",
     hasBackdrop: true,
     backdropClass: "cdk-overlay-transparent-backdrop",
-    scrollStrategy: this.overlay.scrollStrategies.reposition({
-      /**
-       * Autoclosing is required to properly track position in virtual scroll viewports.
-       * @see https://bitwarden.atlassian.net/browse/CL-104
-       */
-      autoClose: true,
-    }),
+    /**
+     * `scrollStrategies.resposition` is not supported in virtual scroll viewports.
+     * @see https://bitwarden.atlassian.net/browse/CL-104
+     */
+    scrollStrategy: this.overlay.scrollStrategies.block(),
     positionStrategy: this.overlay
       .position()
       .flexibleConnectedTo(this.elementRef)

From d231faaa9644317df70f964b5002bd3326b1ef60 Mon Sep 17 00:00:00 2001
From: William Martin <contact@willmartian.com>
Date: Thu, 28 Sep 2023 15:57:21 -0400
Subject: [PATCH 4/4] disable view recycling; use reposition strategy

---
 .../vault/components/vault-items/vault-items.component.html | 2 +-
 libs/components/src/menu/menu-trigger-for.directive.ts      | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/vault/components/vault-items/vault-items.component.html b/apps/web/src/app/vault/components/vault-items/vault-items.component.html
index a9be8dbf1e06..bf376bb9495e 100644
--- a/apps/web/src/app/vault/components/vault-items/vault-items.component.html
+++ b/apps/web/src/app/vault/components/vault-items/vault-items.component.html
@@ -58,7 +58,7 @@
       </tr>
     </ng-container>
     <ng-template body let-rows$>
-      <ng-container *cdkVirtualFor="let item of rows$">
+      <ng-container *cdkVirtualFor="let item of rows$; templateCacheSize: 0">
         <tr
           *ngIf="item.collection"
           bitRow
diff --git a/libs/components/src/menu/menu-trigger-for.directive.ts b/libs/components/src/menu/menu-trigger-for.directive.ts
index 5d10f88a7235..06f11a03b3f4 100644
--- a/libs/components/src/menu/menu-trigger-for.directive.ts
+++ b/libs/components/src/menu/menu-trigger-for.directive.ts
@@ -31,11 +31,7 @@ export class MenuTriggerForDirective implements OnDestroy {
     panelClass: "bit-menu-panel",
     hasBackdrop: true,
     backdropClass: "cdk-overlay-transparent-backdrop",
-    /**
-     * `scrollStrategies.resposition` is not supported in virtual scroll viewports.
-     * @see https://bitwarden.atlassian.net/browse/CL-104
-     */
-    scrollStrategy: this.overlay.scrollStrategies.block(),
+    scrollStrategy: this.overlay.scrollStrategies.reposition(),
     positionStrategy: this.overlay
       .position()
       .flexibleConnectedTo(this.elementRef)