aurelia-bootstrap-datetimepicker - Complete crash on setting date

[CollinHerber]

So basically here is a rundown of what it's doing:

Some things to note; My viewmodel has a calendar that is clickable that will set a date to what is clicked on.

handleCalendarClick(info) {
        console.log(info);
        this.lastSelectedDateTime = info.date;
        this.appointmentOpened = true;
        console.log(this.lastSelectedDateTime);
}

I have your element setup like so:
<abp-datetime-picker value.bind="lastSelectedDateTime"></abp-datetime-picker>

When the element: <abp-datetime-picker value.bind="lastSelectedDateTime"></abp-datetime-picker> is IN VIEW and the handleCalendarClick() happens, chrome will completely freeze up requiring a force close of the app.

Simply changing the element to : <abp-datetime-picker value.bind="someOtherDateTime"></abp-datetime-picker> fixes the problem but I'm unable to bind the calendar clicking to be displayed on the view without breaking.

To elaborate on the is IN VIEW if I select the datetime on the calendar when this element is not yet rendered (if.bind for example) and I open up the element AFTER the datetime is set, nothing is broken and all is fine. It would seem anytime I'm updating the element within view by setting the time, is when it breaks.

[ghiscoding]

Are you sure that you're not using and setting value.bind and model.bind both at the same time? There's a big problem with having the 2 available, 1 sets the other 1 and if you try to set them together you will go into an infinite loop. If I had to redo this lib, I would only provide 1 of them not both (probably value.bind) because I had so many issue opened for infinite loop. I haven't tried your code but I don't think it's enough to replicate the infinite loop.

[CollinHerber]

I am not using model.bind anywhere that pertains to that variable.

I did do a bit more testing and am really confused as to what I am seeing, but can confirm it's an infinite loop issue.

I made the lastSelectedDateTime bindable, and added the listener function

lastSelectedDateTimeChanged() {
        console.log('changed');
 }

With <abp-datetime-picker value.bind="somethingElse"></abp-datetime-picker> I only get a single console logging of 'changed' however as soon as I switch it to <abp-datetime-picker value.bind="lastSelectedDateTime"></abp-datetime-picker> I get an infinite loop as soon as I set lastSelectedDateTime to anything whilst the element is in view.

Any ideas on how to counter this?

My only idea to counter this currently is to have <abp-datetime-picker value.bind="somethingElse"></abp-datetime-picker> and then

lastSelectedDateTimeChanged() {
   this.lastSelectedDateTime = this.somethingElse;
}

However that seems like a poor work around.

Thoughts?

[CollinHerber]

Although thinking on it, it may produce the same results. I'll give it a shot here in a minute.

Yes it has the same result

[CollinHerber]

@ghiscoding I made you a runnable example here: https://github.com/CollinHerber/abd-example

[ghiscoding]

Ok thanks but I don't really time right now to troubleshoot that (my spare is very limited these days), the infinite loop always come from the fact that the model updates the value and vice versa. So basically when you update the value, it will go into the valueChanged and update the model variable on this line. I suggest you to troubleshoot it yourself and see why it always go into the if condition. Technically speaking, it should only go into the if only once but in your case it always go into it and causes the infinite loop.