Can't do programmatically .focus() on the component

[chemb77]

I've tried to use $refs for the component.
this.$refs.phone.focus() - focus is not a function.

Also, $refs for the component is undefined.
this.$refs.phone.$refs
{CountrySelector: undefined,
PhoneNumberInput: undefined}

[Mazel]

Hi @chemb77,

You have to find the input of PhoneNumberInput, so :

<template>
  <VuePhoneNumberInput
    ref="Phone"
    v-model="phoneNumber"
  />
</template>

<script>
export default {
  name: 'YourParentComponent',
  data () {
    return {
      phoneNumber: null
    }
  },
  mounted () {
    this.focusPhoneNumberInput()
  }
  methods: {
    async focusPhoneNumberInput () {
      await this.$nextTick() // wait until the $refs are available
      this.$refs.Phone.$refs.PhoneNumberInput.$el.querySelector('input').focus()
    }
  }
}
</script>

In this example, I trigger the method focusPhoneNumberInput on mounted

Important

This package is unmaintened
A new version of this plugin is available on my new library Maz-UI

• Get Started
• Documentation of MazPhoneNumberInput (more features available)