Datetime Picker - Infinite Loop Possibly Caused by Format Conversion

[mattbeckman]

Running into an issue with persisted data in the datepicker. value.bind sometimes runs into an infinite loop and causes the app to lock-up.

I'm struggling with binding here, and the persisted data that I'm binding has been in both YYYY-MM-DD format or YYYY-MM-DDTHH:mm:ssZ format.

<abp-datetime-picker id="contact-date-value-${$parent.$index}-${$index}" 
value.bind="filter.contactDateValue" icon-base="font-awesome" with-date-icon="false" 
options.bind="{ widgetPositioning: { vertical: 'top' }, sideBySide: true, format: 'YYYY-MM-DD' }" 
placeholder="Select a Date/Time" required></abp-datetime-picker>

The above element is two levels deep in a set of repeaters. Would that have anything to do with it's inability to bind properly?

[ghiscoding]

Unfortunately I don't have much experience using this inside a repeater, but perhaps there's more info in #50

[ghiscoding]

I merged PR #56 made by @Mobe91 Can you verify that this versions 1.3.1 fixes your problem.

Side note, now I remember about the endless loop, it's caused by the selectedValueChanged triggering a selectedItemChanged and the ball keeps rolling. Which is why it's important to have the proper checks in each to avoid such endless loop.

[mattbeckman]

Are the updates published on npm? It says 1.3.1 but was last published May 15th: https://www.npmjs.com/package/aurelia-bootstrap-datetimepicker

[ghiscoding]

My bad that fix was for the Aurelia-Bootstrap-Select not the DatetimePicker, that is what happen when you deal with multiple plugin within the same repo. So there's unfortunately no fix, sorry about that.

Do you have any code to reproduce then?

[krishan-kataria]

I experienced the same issue, the issue seems to occur when date-picker element is toggled in DOM i.e. addded/removed from DOM. I used the date-picker with "if" binding say,

<div if.bind="someCondition">
    <abp-datetime-picker value.bind="enteredDate" options.bind="{ format: 'YYYY-MM-DD' }"</abp-datetime-picker>
</div>

when I try to change the condition value from true to false and vice-versa multiple times, the application gets hanged up.

[czeslav87]

Hello,

We've just encountered similar issue to @krishan-kataria. if.bind cause some inconsistent value parsing. After some investigation I've came to conclusion that it's caused by different "this.value" assignment:

In some lines there is following, which sets Moment object to this.value: this.value = moment(value, this._format, true); In other: this.value = moment(newValue, this._format, true).format(this._format); Which causes string value to be assigned.

This causes some ugly listener loops.

Using consistent assignment would save a lot of trouble.

function setValue(value){
    this.value = moment(value, this._format, true).format(this._format);
}

[ghiscoding]

I merged @czeslav87 PR and released a new NPM version 1.3.3. @mattbeckman @krishan-kataria can someone confirm that it works before closing issue?

[ghiscoding]

No news good news, I'll consider it fixed then. I can reopen if need be

[ghiscoding]

Reopening, I just encountered that myself and last version 1.3.3 is the cause of my infinite loop.

@czeslav87 I'm using it in a modal window in my case and I didn't troubleshoot your code yet but rolling back to previous version 1.3.2 fixes my problem. So I might have to undo some of your code, though I'll have to see what might cause the loop

[ghiscoding]

Pushed another version 1.3.4 on NPM, my problem is resolved and this seems to be much better now. I also tried what @krishan-kataria reported, that doesn't hang the browser either. So hopefully this is it.