Angular Calendar (mwl-calendar) scrolls indefinitely on touch devices after dragging an event

I am using Angular Calendar (mwl-calendar) in my project. On touch devices, I am encountering the following issue: When I drag an event and it triggers auto-scroll, the auto-scroll does not stop even after the event is dropped. The only workaround I have found so far is to capture the touchstart event and call preventDefault() on it. However, this solution disables scrolling within the calendar entirely, which is not ideal.

Here is the configuration of my component:

<div class="my-scrollbar-class" mwlDraggableScrollContainer (touchstart)="onTouchStart($event)">
<mwl-calendar-week-view
[headerTemplate]="customHeaderTemplate"
[hourSegmentTemplate]="customHourSegmentTemplate"
[viewDate]="viewDate"
[events]="events"
[hourSegments]="4"
[hourSegmentHeight]="10"
[refresh]="refresh"
[weekStartsOn]="1"
[locale]="locale"
[eventTemplate]="defaultTemplate"
(eventTimesChanged)="eventDropped($event)"
(eventClicked)="eventClicked($event)"
id="planning"
>
</mwl-calendar-week-view>
</div>


onTouchStart(event: TouchEvent): void {
event.preventDefault();
}


For informations, i'm using angular 13.1.1 so angular-calendar 0.29.0 and angular-draggable-droppable 6.1.0.

Has anyone encountered this issue before or found a better solution to stop auto-scroll after dropping an event without disabling scrolling? Any help would be greatly appreciated!

Continue reading...