CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
Tarvo Mäesepp
Tarvo Mäesepp

Reputation: 4533

Vuetify's autofocus works only on first modal open

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)

Upvotes: 23

Views: 19404

Answers (2)

Tarvo M&#228;esepp
Tarvo M&#228;esepp

Reputation: 4533

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>

Upvotes: 30

Traxo
Traxo

Reputation: 19012

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

Upvotes: 2

Related Questions