tech-systems / panes

🎉📱 Create dynamic modals, cards, panes for your applications in few steps. One instance – Thousands solutions. Any framework and free.
https://panejs.com
MIT License
687 stars 40 forks source link

[BUG] `onDrag` fires with all mouse moves on desktop, sometimes transitions panel #179

Closed rgoldiez closed 2 years ago

rgoldiez commented 2 years ago

Describe the bug The onDrag call back fires on desktop with all mousemove events because it's called before the check for this.mouseDown = true in touchMove (in event.ts). Additionally, because the this.mouseDown = true check is further down in the touchMove handler (after events are pushed on to the steps array) , sometimes on desktop the panel moves without dragging.

To Reproduce Steps to reproduce the behavior:

  1. Create a panel with 3 breakpoints and some <input></input> or <IonInput></IonInput> fields.
  2. Set fastSwipeSensivity to 1 and fastSwipeClose to false (ie, turn off fast swipe close).
  3. Attach an onDrag callback that logs when called.
  4. Move to the middle breakpoint.
  5. On desktop/web, click to focus between input fields at a reasonably quick pace.
  6. Notice the onDrag is called when the mouse moves.
  7. If you click between input fields enough times, you'll notice the panel moves to another breakpoint.

Expected behavior onDrag should only fire when dragging with a touch input or click dragging with a mouse pointer.

Desktop (please complete the following information):

Smartphone (please complete the following information):

roman-rr commented 2 years ago

@rgoldiez thank you, should be fixed.

rgoldiez commented 2 years ago

Thanks @roman-rr ... this is perfect!