Preventing eventClick trigger when drag and dropping events using angular-calendar

Question

I have an issue with the current binding of (eventClicked) and (eventTimesChanged) using angular calendar when my events are both draggable and clickable.

NOTE: This behavior seems to happen on Firefox v84.0.2 but not on Chrome v87.0.4280.88

Dragging an event from one time slot to another sometimes triggers eventTimesChanged AND eventClicked when only the first one would have been expected.

This situation happens:

• On view DAY, everytime
• On view WEEK, if you drag an event onto the same day

Using this stackblitz sandbox and by following the scenariis below, you can understand the behavior:

• On view WEEK, click on the event. The console outputs the eventClicked as expected
• On view WEEK, drag the event from one day to another. The console outputs the eventTimesChanged as expected
• On view WEEK, drag the event from one day to itself (by placing it on another time slot of the same day). The console outputs the eventTimesChanged as expected, but also an unwanted eventClicked
• On view DAY, click on the event. The console outputs the eventClicked as expected
• On view DAY, drag the event on another time slot. The console outputs the eventTimesChanged as expected, but also an unwanted eventClicked

Is there any way to block this eventClicked trigger after a drag and drop on the same day ? I feel like the event detection considers that a mouse click down + mouse click up on one event the same day will always be considered as a click, even if the time slot of the event when clicking down the mouse is different from the time slot of the event when the mouse click is released.

I feel like adding a kind of "delay detection" between the mouse click and the mouse release to define whether it should be considered as a click or a "hold then release" of the event should be sufficient as a workaround, but I don't know how to put it together in that way.

Thank you by advance

question from:https://stackoverflow.com/questions/65849546/preventing-eventclick-trigger-when-drag-and-dropping-events-using-angular-calend

Answer 1

Here is the workaround I came up with. Not sure about its performances but it is working: Modify the component having the angular calendar doing these 3 points

1. Add a BehaviorSubject eventHasChangedSubject to track whether an event has been dragged and dropped recently
2. Start your (eventTimesChanged) binded method by pushing true into this subject, and push false in a 1ms timeout at the end of your action
3. Encapsulate the current content of your (eventClicked) binded method whithin a if (!this.eventHasChangedSubject.value)

export class MyClassContainingCalendarBindedMethods {

  private eventHasChangedSubject = new BehaviorSubject<boolean>(false);

  eventTimesChanged(event: CalendarEventTimesChangedEvent): void {
    this.eventHasChangedSubject.next(true);
    yourCurrentEventTimesChangedCode();
    setTimeout(() => this.eventHasChangedSubject.next(false), 1);
  }
  
  eventClicked({ event }: { event: CalendarEvent }): void {
    if (!this.eventHasChangedSubject.value) {
      yourCurrentEventClickedCode();
    }
  }

}