ReactJS and events
frankandrobot opened this issue · comments
Inspired from the tutorials, I created a mouse component that merges mousedown, mousemove, mouseup events on the window into a single stream. I then feed these values into a state machine.
mousedown -> start listening (via onValue)
mousemove -> do something with movement
mouseup -> stop listening (unsubscribe the onValue)
We use this mouse event to handle UI movement of components (drag/resize).
Everything runs smoothly and the component is uber-easy to reason about.
However, in ReactJS, disabling an input element suppresses click events. This is a problem if the mouse component is always running. What happens is that the initial 'mousedown' event starts the mouse listener but ReactJS suppresses the 'mouseup' event. The result is that the mouse component think the UI wants to move... jittery movement ensues.
This isn't technically an "issue" but wondering if there's an alternative way of doing things... wasn't sure where else to ask.
Well I suggest you use Stack Overflow for questions like this. There's a pretty good support base if you use the bacon.js tag. By the way, you don't probably want to use onValue and manual unsubscription; it's way cooler to do
mousemove.filter(mousedown.awaiting(mouseup)).onValue(handleMove)
But if React suppresses the mousemove, I'm not sure what you can do about it. Maybe add filtering to check if the mouse is actually down?
@raimohanska's has provided the appropriate way.
If you have problems with detecting mouseUp events, I suggest listening to the mouseUp event on document instead of the component.