Angular-calendar: Click event on draggable item

[cosf87]

Describe the bug

In touch screens or mobile devices, click event is not fired when I click on calendar/external draggable events. However, click event is fired if the calendar/external event is not draggable.
I have no issues on draggable items of Angular Material drag and drop module

Minimal reproduction of the problem with instructions

Toogle device toolbar to Ipad Pro (Chrome devTools) and try to fire click event on draggable events.

Screenshots

Versions

• @angular/core: 8.2.14
• angular-calendar: 0.28.2
• Browser name and version: Google Chrome 78.0.3904.108 (Build oficial) (64 bits)

[matts-bot[bot]]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me

[mattlewis92]

Sorry I'm not able to reproduce the issue on the demo page, can you provide a minimal repro on stackblitz or something please? Thanks!

[cosf87]

Hi @mattlewis92 ¿What is the difference between your demo page code and stackblitz code? Because in the second one it does not work.

[mattlewis92]

Oh that's so weird, yeah I can reproduce it on stackblitz but not on the demo

[mattlewis92]

I finally figured this out, it's because the demo uses mwlDraggableScrollContainer on the scrollable container, so preventDefault is never called on the touch start event. There's no easy solution to this that I see right now that won't break other behaviour (i.e. being able to scroll the page when pressing on draggable elements). The only way I can see to fix it is to always apply a drag delay when on touch devices, so you'd have to long press the draggable element to start dragging it, and that should allow the page to scroll as well.

[JulioBorges]

Hi @mattlewis92 Do you have any idea when you can make this change?

[wendlandreas]

@mattlewis92 Found a working solution wrapping the entire function code in touch start event with a setTimeout(() => { ... }, 1). Apperently only 1ms is enough to make it work.
After some testing I didn't find any issues related to this.
However, I consider this more a hack than a fix. And for automated deployments it is not applicable.
Is there a more robust solution to fix this?

[cheapfun]

Hello,

I just had the same problem on the mwl-calendar-week-view component and I found a workaround by adding
(pointerup)="action.onClick({ event: event, sourceEvent: $event })" on a custom eventActionsTemplate.

[wendlandreas]

@cheapfun
After testing your solution I am seeing the problem that after dragging and dropping the item the click event is fired, too.
In my opinion this should not happen.

[wendlandreas]

Seems that (tap) is working for both touch and click events.
I continue testing.

[Slugsh]

As a workaround I made a service that will listen to touchstart. If device is a pointer device, I disabled event dragging. Currently It's impossible to scroll down calendar without accidentally dragging events on a pointer device. Holding down on a event to init dragging on a pointer device sounds like good solution to this problem.

[mattlewis92]

So I finally had some time this weekend to sit down and fix this properly. I've just cut a new release 0.28.10 that should fix everything nicely on touch devices. So you should be able to scroll the page when tapping on events, click events now work and to drag and drop an event you must long press it for 300ms first (only on touch devices). Please can you give it a go and let me know if it works for you 😄