Fix minor regression

integration-test/tests/login-form.macos.spec.js

@@ -125,6 +125,28 @@ test.describe('Auto-fill a login form on macOS', () => {
                 await emailField.focus()
                 await login.assertFocusMessage()
             })
+            test('when focusing a field below the fold', async ({page}) => {
+                // enable in-terminal exceptions
+                await forwardConsoleMessages(page)
+
+                await mocks(page)
+
+                // Load the autofill.js script with replacements
+                await createAutofillScript()
+                    .replaceAll(macosContentScopeReplacements({overlay: true}))
+                    .platform('macos')
+                    .applyTo(page)
+
+                const login = loginPage(page, {overlay: true})
+
+                await login.navigate()
+                await page.waitForTimeout(200)
+
+                const offScreenField = await page.locator('#password-3')
+                await offScreenField.focus()
+
+                await login.assertFocusMessage()
+            })
         })
         test('by clicking a label', async ({page}) => {
             await testLoginPage(page, {clickLabel: true, pageType: 'withExtraText'})

src/UI/controllers/OverlayUIController.js

@@ -77,19 +77,21 @@ export class OverlayUIController extends UIController {
 
         const position = getPosition()
 
-        let delay = 0
+        // If the element is not in viewport, scroll there and recurse. 50ms is arbitrary
         if (!click && !this.elementIsInViewport(position)) {
             input.scrollIntoView(true)
-            delay = 500
+            this._mutObs?.disconnect()
+            setTimeout(() => {
+                this.attach(args)
+            }, 50)
+            return
         }
         this.#state = 'parentShown'
-        setTimeout(() => {
-            this.showTopTooltip(click, position, topContextData)
-                .catch(e => {
-                    console.error('error from showTopTooltip', e)
-                    this.#state = 'idle'
-                })
-        }, delay)
+        this.showTopTooltip(click, position, topContextData)
+            .catch(e => {
+                console.error('error from showTopTooltip', e)
+                this.#state = 'idle'
+            })
     }
 
     /**