vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard
verified publisher icon vuetifyjs

[Bug Report][3.3.21] TextField autofocus not working inside vDialog

Open Dominic-Marcelino opened this issue 2 years ago • 5 comments

Environment

Vuetify Version: 3.3.21 Vue Version: 3.3.4 Browsers: Chrome 117.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

  1. Create a dialog
  2. Add a text-field with autofocus enabled

Expected Behavior

Focusing into the input field after opening the dialog.

Actual Behavior

When using an input field inside a dialog the autofocus prop doesn't work.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

As discussed with Kael this is supposed to work

Dominic-Marcelino avatar Oct 12 '23 17:10 Dominic-Marcelino

issue still happens with vuetify 3.4.8

agentschmitt avatar Dec 21 '23 13:12 agentschmitt

It works for me in this environment: Vuetify Version: 3.5.12 Vue Version: 3.4.21 Browsers: Chrome 123.0.0.0 OS: Windows 10

@Dominic-Marcelino and @agentschmitt is it still actual for you?

EvgenyWas avatar Mar 28 '24 22:03 EvgenyWas

It works for me in this environment: Vuetify Version: 3.5.12 Vue Version: 3.4.21 Browsers: Chrome 123.0.0.0 OS: Windows 10

@Dominic-Marcelino and @agentschmitt is it still actual for you?

Still not working for me using the given reproduction above (With the latest vuetify and vue version)

Vuetify 3.5.13 Vue: 3.4.21 Chrome: 123.0.6312.58 OS: Mac.

Dominic-Marcelino avatar Mar 29 '24 09:03 Dominic-Marcelino

It works for me in this environment: Vuetify Version: 3.5.12 Vue Version: 3.4.21 Browsers: Chrome 123.0.0.0 OS: Windows 10 @Dominic-Marcelino and @agentschmitt is it still actual for you?

Still not working for me using the given reproduction above (With the latest vuetify and vue version)

Vuetify 3.5.13 Vue: 3.4.21 Chrome: 123.0.6312.58 OS: Mac.

Yes, I can reproduce it in BrowserStack only in Chrome on Mac OS.

EvgenyWas avatar Mar 29 '24 18:03 EvgenyWas

The reproduction above fails here as well, while it works without transition: <v-dialog activator="parent" :transition="false">

Vuetify Version: 3.7.2 Vue Version: 3.5.12 Browsers:

  • Firefox 131.0.3
  • Safari 17.6
  • Chrome 129.0.6668.91

OS: Mac OS 14.6.1

Is it only reproducible on Mac and iOS? Disabling transition helps on iOS as well, but does not actually show the keyboard. My current hypothesis is that iOS Safari will only show keyboard if triggered by the user and Vuetify somehow breaks that chain.

bovesan avatar Oct 16 '24 08:10 bovesan

The issue is still their in latest version. Also its not only in iOS Safari. But it works with :transition=false as mentioned by @bovesan

Vuetify 3.7.15 Vue 3.5.13 Browsers:

  • Chrome 134.0.6998.36 (Windows 11)
  • Firefox 136.0 (Windows 11)

agentschmitt avatar Mar 10 '25 12:03 agentschmitt

The exact same problem is happening with VMenu too.

https://play.vuetifyjs.com/#eNptUsFOAyEQ/ZWRS23S3Y3WU7M1mhjjzaMH1wOybENkgcCwMWn67w5s7XabnmDeezweM3zuWfCienauHKJkG1aj7J3mKB8bA1APBXcub3MhrEGujPRHKIPfaE4lwLuTBl4U13Y3gaTqpYnABaqBo/XbhjnupcGGwUZoG2RhTbYnrBBaiR+SdFwH2bAz9zEF9+0MO6EFyl+8oDKZ8KJTUrdAUWwrNdn3YZeu5xFtZ0UMBKGPdCF42VGhjIv4mg4RVF2zpafD0ylt8qC0ea2ry8bkI4Rez/nPnIEJSl2bej3zzCdm80jIOK66OhsjlUF45RCCxDhOU/XOeoR9eikcoPO2hwX9gEWSA5BvQKD+wDYpbhdvUmsLH9br9maxnCRTi45K4hLbRUOjtgZyM26XsB9DT/py4DrK8sgn9pByj0kpIzus2Lpclw9sXO/v2Cr/h9Xsx47Y1x+VDNsF

xmorell avatar Dec 01 '25 15:12 xmorell

setTimeout(() => target?.focus(), 50) seems to be the most reliable when applied here:

https://github.com/vuetifyjs/vuetify/blob/9723468770edca197876b567f67f64159968e58e/packages/vuetify/src/composables/autofocus.ts#L5-L15

J-Sek avatar Dec 01 '25 18:12 J-Sek