bootstrap vue input on a modal autofocus

Question

i have a bootstrap-vue input on a modal

<b-form-input  id="inputText1" ref="inputText1" v-model="inputText" autofocus></b-form-input>

the modal is a bootstrap-vue modal and the show/hide is controlled by a v-if directive.

When the modal is opened the input has focus. If i close the modal the input doesn't have focus anymore.

I have tried to set the autofocus property each time the modal is mounted but it still doesn't focus. I have tried using $nextTick also.

Answer 1

I recomend to you use v-model with vue bootstrap modal

template

    <template>
      <div>
        <b-button @click="showModal= !showModal">Open your bmodal</b-button>
        <b-modal v-model="showModal">Yor modal is active!</b-modal>
        <b-form-input  id="inputText1" ref="inputText1" v-model="inputText" autofocus></b-form-input>

      </div>
    </template>

vue code

    new Vue({
      el: '#app',
       data() {
      return {
        showModal: false
      }
    },
  watch:{
    showModal:function(value){
     // set the focus when the modal opened/closed
      this.$refs.inputText1.focus();
    }
  },
      mounted(){
        // set the focus when the component opened
         this.$refs.inputText1.focus();
      },
      methods: {

      }
    });