Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag continues when pointer is up #20

Open
rhysburnie opened this issue Mar 7, 2023 · 1 comment
Open

Drag continues when pointer is up #20

rhysburnie opened this issue Mar 7, 2023 · 1 comment

Comments

@rhysburnie
Copy link

rhysburnie commented Mar 7, 2023

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
Copy link
Author

rhysburnie commented Mar 7, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant