Beufy text input can not set value

Question

I have a Buefy input field which needs to be cleared after clear icon click. In documentation it is solved via v-model value but I can not use model cause value is not set up directly. There is a delay so it uses method with setTimeout() to set up model. I tried to set up input value via $refs.input.value but it does not work properly. I must click twice to clear the value.

Here is the template code:

<b-field placeholder="napr. Bory, Avion, Optima, ..." class="mb-1">
    <b-input @input="setSearchText"
            ref="searchInput"
            icon-right="close-circle"
            icon-right-clickable
            @icon-right-click="clearSearchInput">
    </b-input>
</b-field>

Here is the component js code:

setSearchText(text) {
    clearTimeout(this.searchTimeout);
    const component = this;
    this.searchTimeout = setTimeout( function() {component.searchText = text;}, 500);
},

clearSearchInput() {
    this.searchText = '';
    this.$refs.searchInput.$refs.input.value = '';
},

Answer 1

I am not sure what issue you are facing but it is working fine for me. I just created a working demo, Please have a look and let me know if any changes required.

Demo :

new Vue({
  el: '#app',
  data: {
    searchText: '',
  },
  methods: {
    setSearchText(text) {
      console.log(text)
      const component = this;
      setTimeout( function() {component.searchText = text;}, 500);
    },

    clearSearchInput() {
      this.searchText = '';
      this.$refs.searchInput.$refs.input.value = '';
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css"/>
<div id="app">
  <b-input @input="setSearchText"
             ref="searchInput">
    </b-input>
    <button @click="clearSearchInput">
    Clear Input
    </button>
  <p>Value: {{searchText}}</p>
</div>