bootstrap-vue: b-form-datepicker doesn't update to v-model until it's hovered

bba278 :

I'm using b-form-datepickerand I'd like to use an additional button which would reset the selected date to a default state. The button also resets another datepicker, an input form and a dropdown-multiselect. I have successfully implemented this, however, when I click reset, the datepickers are not updated immediately but only if they are hovered or clicked.

Here is the mark-up:

<b-btn
  variant="primary"
  class="mr-2"
  @click="resetSearch"
>
  <font-awesome-icon
    icon="undo"
    class="mr-sm-1"
  />
  <span class="d-sm-inline-block d-none">Reset</span>
</b-btn>

<b-form-datepicker
  id="minDate"
  v-model="minDate"
  size="lg"
  today-button
  close-button
  start-weekday="1"
  value-as-date
  locale="en-GB"
/>

<b-form-datepicker
  id="maxDate"
  v-model="maxDate"
  size="lg"
  today-button
  close-button
  start-weekday="1"
  value-as-date
  locale="en-GB"
/>

This is how I set the model initially

created () {
  this.minDate = this.$moment().subtract(5, 'years').toDate()
  this.maxDate = this.$moment().toDate()
  this.dataLoaded = true
}

This is the resetSearch method

resetSearch () {
  this.publicationsSearchKeyword = ''
  this.minDate = this.$moment().subtract(5, 'years').toDate()
  this.maxDate = this.$moment().toDate()
  this.publicationsListValue = []
}

Here is a codepen : https://codepen.io/BBA278/pen/vYOxBgz

Any ideas how should I build this in order for the selected date to update immediately on reset button click?

bravemaster :

I went to github repository to open an issue on this one. However, a similar issue was on top of the list: Datepicker doesn't update value without hovering over it

They say it was fixed in a pull:

Actually this is fixed in PR #4824

Maybe in v.2.6.0 it will be fixed.