Enhancement: Add a focus() (and blur()?) method to mdl-textfield

I’m currently battling to make a login form using 2 mdl-textfields and an mdl-button. I’d like the Enter key to move focus to the next text box (e.g. Username to Password), and then from Password to fire the Login button. Getting the keyup events is no problem (@keyup.native="onKeyUp"), but setting focus without resorting to id’s and document.getElementById() is proving tricky. I tried the Vue ref="password" and then using this.$refs.password.$el.focus(), but of course that targets the div which is the parent of the input field, which then ignores the focus request. Or, am I going about this wrong?

If there’s another vmdl component which already does something similar, perhaps now would be a good time to try a pull request. Can you point me at one which does something like this I could look at?

[dsl101]

I added these methods, which seem to have the desired effect. In v-if / v-else-if sections which generate the actual <input> tag, it appears you can reuse the ‘ref’, so providing you only end up with one focusTarget ref, all is well:

methods: {
  focus () {
    this.$refs.focusTarget.focus()
  },
  focusAndSelect () {
    this.$refs.focusTarget.focus()
    this.$refs.focusTarget.select()
  },
  blur () {
    this.$refs.focusTarget.blur()
  }
},

[posva]

@dsl101 Cool, thanks!