Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Datepicker doesn't update value without hovering over it #4827

Closed
RuneHanssens opened this issue Feb 25, 2020 · 13 comments · Fixed by #4824
Closed

Datepicker doesn't update value without hovering over it #4827

RuneHanssens opened this issue Feb 25, 2020 · 13 comments · Fixed by #4824

Comments

@RuneHanssens
Copy link

@RuneHanssens RuneHanssens commented Feb 25, 2020

Describe the bug

When the v-model of the datepicker changes externally, it doesn't update the displayed value untill you hover over it. By default I initialize the v-model to new Date() but in some cases I will overwrite this value by something I fetch from my API.

I worked like this:

<b-form-datepicker
              id="datepicker"
              v-model="date"
              value-as-date
              required
></b-form-datepicker>
@Component
export default class MyComponent extends Vue {
private date = new Date();
...
async mounted() {
    if ( ... ) {
      this.date = await ...
    }
  }
}

Expected behavior

The datepicker should update when it's v-model updates.

Versions

Libraries:

  • BootstrapVue: 2.5.0
  • Bootstrap: 4.4.1
  • Vue: 2.6.11

Environment:

  • Browser: Chrome
@RuneHanssens RuneHanssens changed the title Datepicker doesn't update value without hover Datepicker doesn't update value without hovering over it Feb 25, 2020
@Hiws
Copy link
Member

@Hiws Hiws commented Feb 25, 2020

https://codepen.io/Hiws/pen/MWwJNKL

Short demo of the issue.

Oddly enough if you change it multiple times, it will update after the 2nd time without hovering, however be 1 update out-of-sync.
Hovering will resync it.

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 25, 2020

Interesting...

What if you wrap the manual update of the v-model in a $nextTick?

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 25, 2020

This codepen works: https://codepen.io/tmorehouse/pen/dyoNxeW

Note that since you are setting the value (v-model) as a Date object, you need to set the value-as-date prop also.

@Hiws
Copy link
Member

@Hiws Hiws commented Feb 25, 2020

The codepen you linked looks to have the same issue still.
The v-model gets updated but the "label" in the b-datepicker doesn't update until you update a 2nd time or hover over the component.

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 25, 2020

Strange... for me (Chrome on Windows), it is working with the change.

@RuneHanssens
Copy link
Author

@RuneHanssens RuneHanssens commented Feb 25, 2020

Very strange... I still have the issue aswell with the codepen you linked also Chrome on Windows

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 25, 2020

Do you see a similar issue when changing the v-model on the <b-calendar> component?

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 25, 2020

Actually this is fixed in PR #4824

There was a typo in the data property for the formattedValue (which is updated by the context event)

You can try it out in the dev docs playgound: https://bootstrap-vue.netlify.com/play

@reydez
Copy link

@reydez reydez commented Feb 26, 2020

Describe the bug

When the v-model of the datepicker changes externally, it doesn't update the displayed value untill you hover over it. By default I initialize the v-model to new Date() but in some cases I will overwrite this value by something I fetch from my API.

I worked like this:

<b-form-datepicker
              id="datepicker"
              v-model="date"
              value-as-date
              required
></b-form-datepicker>
@Component
export default class MyComponent extends Vue {
private date = new Date();
...
async mounted() {
    if ( ... ) {
      this.date = await ...
    }
  }
}

Expected behavior

The datepicker should update when it's v-model updates.

Versions

Libraries:

  • BootstrapVue: 2.5.0
  • Bootstrap: 4.4.1
  • Vue: 2.6.11

Environment:

  • Browser: Chrome

this is happening to me also, i dont know whats going on! ... it seems to work good when i open a modal and try to edit information the date renders ok, but when i try to get info from a data base and for example the page loads it has that problem

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Feb 26, 2020

@reydez See comment #4827 (comment) above

@RuneHanssens
Copy link
Author

@RuneHanssens RuneHanssens commented Mar 2, 2020

A little workaround for this issue. Just wrap your component in a div that displays if you initialized your component.

<div v-if="initialized">
...
private async mounted() {
    this.date = await ...
    this.initialized = true
}

@tmorehouse tmorehouse moved this from To do to In progress in 2.6.0 Mar 2, 2020
@tmorehouse tmorehouse unpinned this issue Mar 5, 2020
@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Mar 5, 2020

BootstrapVue 2.6.0 has been released

2.6.0 automation moved this from In progress to Done Mar 5, 2020
@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Mar 5, 2020

BootstrapVue 2.6.0 has been released

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
2.6.0
  
Done
5 participants