[PM-5189] Fixing smaller issues with how the inline menu renders

apps/browser/src/autofill/background/overlay.background.ts

@@ -52,6 +52,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
   private overlayLoginCiphers: Map<string, CipherView> = new Map();
   private pageDetailsForTab: PageDetailsForTab = {};
   private subFrameOffsetsForTab: SubFrameOffsetsForTab = {};
+  private rebuildSubFrameOffsetsTimeout: number | NodeJS.Timeout;
   private userAuthStatus: AuthenticationStatus = AuthenticationStatus.LoggedOut;
   private overlayButtonPort: chrome.runtime.Port;
   private overlayListPort: chrome.runtime.Port;
@@ -277,6 +278,10 @@ class OverlayBackground implements OverlayBackgroundInterface {
       return;
     }
 
+    if (this.rebuildSubFrameOffsetsTimeout) {
+      clearTimeout(this.rebuildSubFrameOffsetsTimeout as number);
+    }
+
     const frameTabs = Array.from(subFrameOffsetsForTab.keys());
     for (const frameId of frameTabs) {
       if (frameId === sender.frameId) {
@@ -287,8 +292,7 @@ class OverlayBackground implements OverlayBackgroundInterface {
       await this.buildSubFrameOffsets(sender.tab, frameId, sender.url);
     }
 
-    // TODO: Consider a better way to facilitate this delayed update
-    setTimeout(() => {
+    this.rebuildSubFrameOffsetsTimeout = setTimeout(() => {
       if (this.isFieldCurrentlyFocused) {
         void this.updateOverlayPosition({ overlayElement: AutofillOverlayElement.List }, sender);
         void this.updateOverlayPosition({ overlayElement: AutofillOverlayElement.Button }, sender);

apps/browser/src/autofill/content/autofill-init.ts

@@ -1,3 +1,5 @@
+import { EVENTS } from "@bitwarden/common/autofill/constants";
+
 import AutofillPageDetails from "../models/autofill-page-details";
 import { InlineMenuElements } from "../overlay/abstractions/inline-menu-elements";
 import { AutofillOverlayContentService } from "../services/abstractions/autofill-overlay-content.service";
@@ -92,7 +94,7 @@ class AutofillInit implements AutofillInitInterface {
       sendCollectDetailsMessage();
     }
 
-    window.addEventListener("load", sendCollectDetailsMessage);
+    globalThis.addEventListener(EVENTS.LOAD, sendCollectDetailsMessage);
   }
 
   /**

apps/browser/src/autofill/services/autofill-overlay-content.service.ts

@@ -83,6 +83,10 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
 
     this.formFieldElements.add(formFieldElement);
 
+    if (!this.mostRecentlyFocusedField) {
+      await this.updateMostRecentlyFocusedField(formFieldElement);
+    }
+
     if (!this.autofillOverlayVisibility) {
       await this.getAutofillOverlayVisibility();
     }
@@ -91,11 +95,6 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
 
     if (this.getRootNodeActiveElement(formFieldElement) === formFieldElement) {
       await this.triggerFormFieldFocusedAction(formFieldElement);
-      return;
-    }
-
-    if (!this.mostRecentlyFocusedField) {
-      await this.updateMostRecentlyFocusedField(formFieldElement);
     }
   }
 
@@ -765,7 +764,15 @@ class AutofillOverlayContentService implements AutofillOverlayContentServiceInte
 
     await this.updateMostRecentlyFocusedField(this.mostRecentlyFocusedField);
     this.updateOverlayElementsPosition();
-    setTimeout(() => this.toggleOverlayHidden(false), 50);
+    setTimeout(() => {
+      this.toggleOverlayHidden(false);
+      if ((this.mostRecentlyFocusedField as HTMLInputElement).value) {
+        void this.sendExtensionMessage("closeAutofillOverlay", {
+          overlayElement: AutofillOverlayElement.List,
+          forceCloseOverlay: true,
+        });
+      }
+    }, 50);
     this.clearUserInteractionEventTimeout();
 
     if (

apps/browser/src/autofill/services/collect-autofill-content.service.ts

@@ -201,12 +201,18 @@ class CollectAutofillContentService implements CollectAutofillContentServiceInte
    * @private
    */
   private updateCachedAutofillFieldVisibility() {
-    this.autofillFieldElements.forEach(
-      async (autofillField, element) =>
-        (autofillField.viewable =
-          await this.domElementVisibilityService.isFormFieldViewable(element)),
+    this.autofillFieldElements.forEach(async (autofillField, element) => {
+      const currentViewableState = autofillField.viewable;
+      autofillField.viewable = await this.domElementVisibilityService.isFormFieldViewable(element);
+
+      if (!currentViewableState && autofillField.viewable) {
+        await this.autofillOverlayContentService?.setupAutofillOverlayListenerOnField(
+          element,
+          autofillField,
         );
       }
+    });
+  }
 
   /**
    * Queries the DOM for all the forms elements and