fix(VTextField): avoid infinite focus loop (#21628)

fixes #21626

Co-authored-by: Kael <[email protected]>

Author: J-Sek

packages/vuetify/src/components/VTextField/VTextField.tsx

@@ -105,7 +105,7 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
 
       nextTick(() => {
         if (inputRef.value !== document.activeElement) {
-          inputRef.value?.focus()
+          nextTick(() => inputRef.value?.focus())
         }
       })
     }

packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.browser.tsx

@@ -1,7 +1,10 @@
+// Components
 import { VTextField } from '../VTextField'
+import { VBtn } from '@/components/VBtn'
+import { VMenu } from '@/components/VMenu'
 
 // Utilities
-import { generate, render, userEvent } from '@test'
+import { commands, generate, render, screen, userEvent, wait } from '@test'
 import { cloneVNode } from 'vue'
 
 const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
@@ -60,6 +63,46 @@ describe('VTextField', () => {
     expect(element).toHaveTextContent('Error!')
   })
 
+  it('does not trigger infinite loop when autofilled by password manager', async () => {
+    render(() => (
+      <div>
+        <VTextField label="username" name="username" type="email" />
+        <VTextField label="password" name="password" type="password" />
+        <VBtn>
+          Some button
+          <VMenu activator="parent">
+            <div class="my-menu-content">Some text in menu</div>
+          </VMenu>
+        </VBtn>
+      </div>
+    ))
+
+    const input1 = screen.getByCSS('input[name="username"]') as HTMLInputElement
+    const input2 = screen.getByCSS('input[name="password"]') as HTMLInputElement
+
+    await commands.abortAfter(5000, 'VTextField infinite loop detection')
+
+    input1.focus()
+    input1.value = 'my username'
+    input1.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertFromPaste' }))
+    input1.dispatchEvent(new Event('change', { bubbles: true }))
+
+    input2.focus()
+    input2.value = 'my password'
+    input2.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertFromPaste' }))
+    input2.dispatchEvent(new Event('change', { bubbles: true }))
+
+    await wait(100)
+    const button = screen.getByCSS('.v-btn')
+    await userEvent.click(button)
+    await wait(100)
+
+    const menuContent = screen.getByCSS('.my-menu-content')
+    expect(menuContent).toBeVisible()
+
+    await commands.clearAbortTimeout()
+  })
+
   it('handles multiple options in validate-on prop', async () => {
     const rule = vi.fn(v => v?.length > 5 || 'Error!')
 

packages/vuetify/test/setup/browser-commands.ts

@@ -68,7 +68,32 @@ async function setFocusEmulationEnabled (ctx: BrowserCommandContext) {
   return ctx.browser.sendCommand('Emulation.setFocusEmulationEnabled', { enabled: true })
 }
 
-export const commands = { drag, scroll, isDisplayed, percySnapshot, waitStable, setFocusEmulationEnabled }
+let abortTimeout: ReturnType<typeof setTimeout>
+function abortAfter (ctx: BrowserCommandContext, delay: number, name: string) {
+  abortTimeout = setTimeout(async () => {
+    // eslint-disable-next-line no-console
+    console.error(`[Error] Test timeout: Aborting after ${delay}ms for ${name} in ${ctx.testPath}`)
+    // eslint-disable-next-line no-console
+    console.error('[Warning] "chrome" process might still be running and require manual shutdown.')
+    process.exitCode = 1
+    await ctx.project.vitest.exit(true)
+  }, delay)
+}
+
+function clearAbortTimeout (ctx: BrowserCommandContext) {
+  clearTimeout(abortTimeout)
+}
+
+export const commands = {
+  drag,
+  scroll,
+  isDisplayed,
+  percySnapshot,
+  waitStable,
+  setFocusEmulationEnabled,
+  abortAfter,
+  clearAbortTimeout,
+}
 
 export type CustomCommands = {
   [k in keyof typeof commands]: typeof commands[k] extends (ctx: any, ...args: infer A) => any