search

antoniandre / splitpanes

A Vue 3 (and 2) reliable, simple and touch-ready panes splitter / resizer.
https://antoniandre.github.io/splitpanes
MIT License
1.89k stars 168 forks source link

Selection issue on start dragging #168

Open Tal500 opened 2 years ago

Tal500 commented 2 years ago

There is a bug while trying to start dragging. The user can accidentally select one pane content, if he is fast enough. In Firefox, if the user goes to the edge of the split and drag fast enough, he may be able to select (wasn't happen in Edge.) Here is a demo in Firefox:

https://user-images.githubusercontent.com/1467072/174041311-d70ff787-fcd0-4c83-8b5c-86db553a40e3.mov

The user is unable to select it after the "first frame" of the dragging, because of the following lines in the css conf: https://github.com/antoniandre/splitpanes/blob/adc50968a386402917ffe702bb447dd0c3409151/src/components/splitpanes/splitpanes.vue#L690-L706 and the following css def: https://github.com/antoniandre/splitpanes/blob/adc50968a386402917ffe702bb447dd0c3409151/src/components/splitpanes/splitpanes.vue#L719-L727

However, the user can do on the "first frame" (in Firefox at least) if he is fast enough. The reason is bacause The reason it happen is because this.touch.dragging is set to true only in: https://github.com/antoniandre/splitpanes/blob/adc50968a386402917ffe702bb447dd0c3409151/src/components/splitpanes/splitpanes.vue#L89-L97 but rather should be set to true starting from onMouseDown. This way, the browser would immediately forbid the user to select the panes, and wouldn't wait for the next onMouseMove event.