search

ethanselzer / react-cursor-position

A React component that decorates its children with mouse and touch coordinates relative to itself.
https://ethanselzer.github.io/react-cursor-position
MIT License
143 stars 35 forks source link

Interaction with react-dnd #10

Closed renchap closed 7 years ago

renchap commented 7 years ago

I am using react-cursor-position to detect the position of the mouse when hovering an element and display a menu (menu on the left when cursor is on the left half, and on the right otherwise). Based on the cursor position, I set one of these 2 classes on the element : hover-right or hover-left

But my Component is also draggable using react-dnd:

@props.connectDragSource(
  <ReactCursorPosition>
    <Image />
  </ReactCursorPosition>
);

It seems to work fine overall, but sometimes (I have not been able to find the real reproduction conditions yet) it messes up completely and my react-dnd hovering events are triggered randomly in large quantity.

Do you have any idea on what can causes this, and how I can try to locate the cause (and fix it) ?

renchap commented 7 years ago

I forgot: sometimes (again, I can not find a reliable way to reproduce), I am getting an Cannot call beginDrag while dragging. exception. This seems to come from react-dnd, but this is caused by the interaction with ReactCursorPosition.

ethanselzer commented 7 years ago

Hi @renchap, I'm sorry you are experiencing an issue. Unfortunately I don't have experience with react-dnd, so I don't have a basis to form a suggestion of what could be going wrong. I hope you solve the issue! Please post back here with any of your discoveries, specific to using react-cursor-position with react-dnd, so that anyone else experiencing the problem may benefit.

ethanselzer commented 7 years ago

Hi @renchap, I'm closing this for now, due to inactivity. I hope you found a solution to the problem you experienced.