vueuse / gesture

🕹 Vue Composables making your app interactive
https://gesture.vueuse.org
MIT License
362 stars 18 forks source link

Drag continues when pointer is up #20

Open rhysburnie opened 1 year ago

rhysburnie commented 1 year ago

Hello,

I am using useDrag. So far only been testing on desktop.

I notice quite frequently that if i lift the mouse button (well trackpad non pressed) the drag continues to function. Further to that this can happen on multiple drag elements where if they get in this state moving pointer from one to another each will still continue their drag without the pointer being down.

I log the state event.down and state.down, and the down is still true in the state so even tho I am handling a "cancel" bassed on state.down it doesnt work because its the down that is getting stuck

console.log('pan-item drag', state.event.type, state.down, state);

result:
pan-item drag pointermove true {hovering: false, scrolling: false, wheeling: false, dragging: true, moving: false, …}

Other info: I have the axis locked to 'x'

rhysburnie commented 1 year ago

In addition to the above I also tried the following:

Added @pointerup="handlePointerUp" to the element

let currentDragState;

function handlePointerUp(e) {
  console.log('pan-item handlePointerUp', e.type, currentDragState);
  if (currentDragState && currentDragState.cancel) {
    console.log('pan-item should cancel drag');
    currentDragState.cancel();
  }
}

useDrag(
  (state) => {
    console.log('pan-item drag', state.event.type, state.down, state);
    currentDragState = state;
    if (state.first) handlePanStart(state);
    else if (state.last || state.canceled) handlePanEnd(state);
    else if (state.down) handlePan(state);
  },
  {
    domTarget: el,
    axis: 'x',
    filterTaps: true,
  }
);

But I only get the logs from handlePointerUp when the drag behaves correctly. As soon as it gets stuck dragging after the pointer is up the pointerup even isn't even fired, so seems like soming internal to useDrag must even prevent that. Not that my "fix" is ideal, I would assume it would work if the pointerup actually fired since the docs says you can cance events. The main point is even the event itself is not running so none of handlePointerUp runs at all.