telerik / kendo-angular

Issue tracker - Kendo UI for Angular
http://www.telerik.com/kendo-angular-ui/
Other
469 stars 217 forks source link

[Scheduler] Slot Selection - dragEvent emits unexpectedly and breaks selection #4446

Open Charles22219 opened 2 weeks ago

Charles22219 commented 2 weeks ago

Description

title. this causes the user to be blocked from selecting more slots since dragEvent finishes unexpectedly. This is only reproduced in Windows environment and tested on both Chrome and Firefox.

Steps To Reproduce

this can be reproduced in the documentation itself in custom callback. but this can also be observed while using the built-in directive

*note this is intermittent but happens often. the steps assumes the issue happens

  1. try to drag select from anywhere
  2. after drag clicking from the first slot the cursor changes to a not-allowed cursor and you are not able to drag select anymore
  3. if you look at the event log, the times that this happens you will notice that slotDragEnd is emitted right away after slotDragStart

Screenshots or video

Chrome:

https://github.com/user-attachments/assets/56c6678f-3cd1-4ce7-8995-889dcc664550

Firefox:

https://github.com/user-attachments/assets/7b1a062e-ed89-40a6-802b-431e3a54e124

Actual Behavior

slotDragEnd sometimes emits right after slotDragStart even though i have not let go of left mouse click

Expected Behavior

slotDragEnd should not be emitted till i let go of the left mouse click

Browser

All

Browser version

latest

OS type

Windows

OS version

No response

Last working version of the Kendo UI for Angular package (if regression).

No response

yanmariomenev commented 1 week ago

The issue might be related to how table cells are dragged in the browser. It seems that the entire cell is being dragged in the background which is visually seen in the Firefox browser. This led me to try the following workaround to stop the dragging of the td cell in the Scheduler:

.k-scheduler-table td {
  user-select: none;   
  -webkit-user-drag: none;
  pointer-events: auto;   
}

Workaround example - https://stackblitz.com/edit/angular-jdaplq-myraup

Charles22219 commented 1 week ago

@yanmariomenev this worked on my project. Thanks

*kendo-scheduler version: 16.2