Search code examples
angulartelerikkendo-ui-angular2angular-reactive-formskendo-datepicker

Angular2 Kendo-Datepicker Popup-overlay Throws Error

I am using kendo-datepicker controls on my form. Everything is working as expected except for when the datepicker opens the Calendar popup ON TOP of the input control, as in:

kendo-datepicker ONTOP overlay

If it opens underneath everything is fine, but ON TOP it seems to break the rest of the controls using @progress/kendo-angular-popup dependency to be nonresponsive (requires form refresh). I've updated all @progress/telerik controls to latest versions, can't figure out why this is happening...

There are no exceptions being thrown in the console.

Is there a way to disable this behavior so that it only opens underneath? The user would just have to scroll down to see the calendar instead of it flipping to remain in the viewport.

EDIT: I updated my angular version and am now getting an error thrown in the console when the control open on top: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

Solution

  • There is an open issue about this @ https://github.com/telerik/kendo-angular/issues/687. The current solution is to upgrade @progress/kendo-angular-dateinputs to version 1.0.6, which worked on my end.

    NOTE: Make sure to remove the necessary lines from your .npmrc file located at %USERPROFILE%\.npmrc to use @progress new npmjs repo instead of the private one. Link for reference.