I am trying to use Vuetify's v-text-field
autofocus
however it works only first time. After I close the dialog, it doesn't work anymore.
This is what I am trying to do:
<v-text-field ref="focus" autofocus></v-text-field>
While googling I found out that it was a bug that was fixed in some version but they had temporary solution which I also tried:
watch: {
dialog: (val) ->
if !val
debugger
requestAnimationFrame( =>
@$refs.focus.focus()
)
}
Am I doing something wrong or it is still a bug? Setting breakpoint I saw that it stops at that point. Can anybody lead me to the right direction?
The only difference I have is that I am using Vuex and the dialog variable is in Vuex store. And the dialog is getter/setter.
dialog:
get: ->
return this.$store.state.my_store.isDialogOpen
set: (value) ->
this.$store.commit('my_store/MY_MUTATION', value)
The only thing that worked for me was the v-if="dialog"
because the autofocus prop will only work on initial load which is why it was available only for the first time I opened the dialog.
So the working v-tex-field with autofocus in dialog would look something like this:
<v-text-field v-if="dialog" label="Label" autofocus></v-text-field>
In your sandbox (but also seems to be the case in your question) you had an error in your code, you removed return
from the provided workaround:
watch: {
dialog (val) {
if (!val) return; // you removed `return` here
requestAnimationFrame(() => {
return this.$refs.focus.focus();
}
});
So actually it works
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With