How to open vuejs datepicker on field focus?

The vuejs datepicker opens only when I click on its input field. I want it to pop up when I focus on its field by pressing tab from the previous field.

I looked for solutions on stackoverflow but could not find anything similar.

Here is my code:

const app = new Vue({
  el: '#app',
  components: {
  	vuejsDatepicker
  }
})

<div id="app">
  <input type="text" placeholder="Textbox" autofocus>
  <br><br>
  <vuejs-datepicker placeholder="Datepicker"></vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>

Whenever I press tab after writing something on the textbox, the focus goes to the datepicker field but the picker only pops up when I click on it using mouse. Whereas I want it to open everytime on focus. Can someone help please?

I had a look at the source.. The focus event is not bound so you may open an issue about that. But you can achieve the effect the following way:

<datepicker ref="dp1" @focusin.native="onfocusin"></datepicker>

And the method:

methods: {
    onfocusin(){
        setTimeout((ev)=>{
            this.$refs.dp1.isOpen || this.$refs.dp1.showCalendar(ev);
        }, 50)
    }
}

Another option is to modify the plugin a via mixin where you can modify the showCalendar method that currently toggles the visibility of the calendar to only allow it to open the calendar:

let myDatepicker = {
    mixins: [datepicker],

    methods: {
        showCalendar(){
            if(this.isOpen) return;

            return datepicker.showCalendar.apply(this, arguments)
        }
    }
}