Currently, I am utilizing the Angular directive called angular-gantt to create a gantt chart that displays tasks. Among the various options available, the ones I am focusing on are on-row-clicked, on-task-clicked, and on-task-updated.
The issue I am facing is that when I update a task by resizing or moving it, the on-task-updated event triggers followed immediately by the on-task-clicked event. My goal is to have the events stop after the first one.
I attempted to use $event.stopPropagation() at the start of the function called by on-task-updated, but it did not produce the desired outcome. I also experimented with adding it to the ng-click for tasks like so:
ng-click="raiseDOMTaskClickedEvent($event, task); $event.stopPropagation();"
However, this approach also proved ineffective. The code from the directive responsible for triggering my functions is as follows:
$scope.raiseTaskClickedEvent = function(task) {
$scope.onTaskClicked({ event: { task: task } });
};
$scope.raiseTaskUpdatedEvent = function(task) {
$scope.onTaskUpdated({ event: { task: task } });
};
It seems like there might be two listeners added, one for clicked and another for updated, resulting in both events firing simultaneously or very close together. Unfortunately, I am unsure how to troubleshoot such an issue.