From ee5c6f07c5c4ce974bb26bb06999232d5736bbb0 Mon Sep 17 00:00:00 2001
From: Cesar Gonzalez <cgonzalez@bitwarden.com>
Date: Tue, 25 Jun 2024 05:14:40 -0500
Subject: [PATCH] [PM-5189] Fixing issues found within code review behind how
 we position elements

---
 .../autofill/background/overlay.background.ts  | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
index 08a19b8acf8..a3f8c76d0db 100644
--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -1191,7 +1191,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    */
   private async triggerOverlayReposition(sender: chrome.runtime.MessageSender) {
     if (this.checkShouldRepositionInlineMenu(sender)) {
-      this.cancelUpdateInlineMenuPositionSubject.next();
+      this.cancelInlineMenuFadeInAndPositionUpdate();
       void this.toggleInlineMenuHidden({ isInlineMenuHidden: true }, sender);
       this.repositionInlineMenuSubject.next(sender);
     }
@@ -1205,7 +1205,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    */
   private async triggerSubFrameFocusInRebuild(sender: chrome.runtime.MessageSender) {
     this.rebuildSubFrameOffsetsSubject.next(sender);
-    this.cancelUpdateInlineMenuPositionSubject.next();
+    this.cancelInlineMenuFadeInAndPositionUpdate();
     this.repositionInlineMenuSubject.next(sender);
   }
 
@@ -1216,6 +1216,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
    * @param sender - The sender of the message
    */
   private repositionInlineMenu = async (sender: chrome.runtime.MessageSender) => {
+    this.cancelInlineMenuFadeInAndPositionUpdate();
     if (!this.isFieldCurrentlyFocused) {
       await this.closeInlineMenuAfterReposition(sender);
       return;
@@ -1251,6 +1252,14 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     this.closeInlineMenu(sender, { forceCloseInlineMenu: true });
   }
 
+  /**
+   * Cancels the observables that update the position and fade in of the inline menu.
+   */
+  private cancelInlineMenuFadeInAndPositionUpdate() {
+    this.cancelInlineMenuFadeIn();
+    this.cancelUpdateInlineMenuPositionSubject.next();
+  }
+
   /**
    * Sets up the extension message listeners for the overlay.
    */
@@ -1288,6 +1297,11 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     return true;
   };
 
+  /**
+   * Handles clearing page details and sub frame offsets when a frame or tab navigation event occurs.
+   *
+   * @param details - The details of the web navigation event
+   */
   private handleWebNavigationOnCommitted = (
     details: chrome.webNavigation.WebNavigationTransitionCallbackDetails,
   ) => {