How to focus v-textarea programatically in vuetify and typescript?

Question

Seems like impossible now, I tried some crazy stuff like:

(this.refs.vtextarea as any).textarea.focus()

((this.refs.vtextarea as Vue).$el as HTMLElement).focus()

etc...

Javascript source is hardly readable for me but it's sad to had to do it like this...

Int this some basic stuff, or am I missing something obvious ?

PS: well I see textarea element somewhere there in hierarchy... Maybe I can access by some basic dom child element access way... but this will be like writing worst code of my life.

Solution 1

Vuetify does not always work when focusing input, even with $nextTick.

This is how we do it generically for both input and textarea. We actually use this code with the ref set to our form in order to focus the first visible textarea or input. However, you can target just the widget that suits your needs.

mounted() {
  this.$nextTick(() => {
          const theElement = this.$refs.myRef         
          const input = theElement.querySelector('input:not([type=hidden]),textarea:not([type=hidden])')
          if (input) {
            setTimeout(() => {
              input.focus()
            }, 0)
          }
  });
}

The delay for $nextTick and setTimeout is negligible, often required, and will save you time and time again.

You don't need to exclude type=hidden either, but it can't hurt.

If the ref is not an HTMLElement, but instead a VueComponent, you may need to use this.$refs.myRef.$el to get the DOM element.

Solution 2

I got mine to work with this:

mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.$refs.descriptionDescription.$refs.input.focus()
      })
    })
  },

Combination of code from @Thomas and @Steven Spungin

Solution 3

<template>
   <v-text-area
      ref="myTextArea"
   />
</template>

<script>
   ...
   created () {
      this.$refs["myTextArea"].$refs.textarea.focus()
   }
</script>

I did it like this for text-fields. I think it should work the same way.

Solution 4

you can use the autofocus property

<v-text-field
                        autofocus
                        label="Insert Document Number*"
                        single-line
                      ></v-text-field>

Solution 5

work for me

setTimeout(() => {
   this.$refs.textNote.$refs.input.focus()
})

View more solutions

Comments

[Renetik]

Sadly its not about the next tick here, I call it when it is already rendered and ready.

[Meena Chaudhary]

for me this.$refs["myTextArea"].$refs.input.focus(); worked.

[Marcello B.]

This is the only solution that worked for me.

[Marcello B.]

This is great for the first load.