Vue-material: How to set focus on md-input?

[v0y]

Hello,

Thank you for great work!

My question is: How to set focus on md-input?
I tried something like:

this.$refs.myref.$el.focus()

But it doesn't work

Any ideas? thanks!

[stefanpkc]

in console: $vm.$refs.myref.$el.focus();

I tried this in the mounted method: this.$refs.myref.$el.focus();

On the component itself: <md-input ref="myref" v-model="initialValue"></md-input>

Works for me.

EDIT:

I checked it again. Seems myref is undefined in the created method. So you should use mounted instead.

[marcosmoura]

If you want to set this when some button is clicked you can have something like that:

<md-button @click.native="$refs.focusable.$el.focus()">Set Focus</md-button>
<md-input-container>
  <md-input ref="focusable"></md-input>
</md-input-container>

If you want this programatically this should be on the mounted function.

[tsunamilx]

Didn't work for me.
I have to set timeout in order to make it work:

setTimeout(() => {this.$refs.focusable.$el.focus();}, 500);

<md-input ref="focusable"></md-input>

[Matt-Dionis]

I'm noticing the need for setTimeout as well. In my case I want to autofocus an md-input when an md-dialog is opened:

<md-input placeholder="Name" v-model="newLocation.name" `ref="nameInput"></md-input>

openDialog (ref) {
  this.$refs[ref].open();
  setTimeout(() => {
    this.$refs.nameInput.$el.focus();
  });
}

The above works, but I'm not sure why I need the setTimeout. I tried replacing setTimeout with this.$nextTick, but that does not work.

[daewooLeeNy]

In my case, the nextTick() did not work for focus styles.

https://jsfiddle.net/lsinji/cxfrxjg1/5/