search

BerkeleyTrue / react-material

Material design components written with React.js and React Style
http://berkeleytrue.github.io/react-material
404 stars 38 forks source link

Fix draggable clickable elements (e.g. buttons, list items) #65

Closed rivol closed 6 years ago

rivol commented 9 years ago

Related to #15

I have a scrollable List with clickable ListItems in it. Previously when I scrolled the list on a touch device, the onClick handler of a list item was triggered. Not anymore.

I wasn't sure about how to best tackle this, so this is a very simple patch that uses state to keep track of whether any mouseMove events occurred before the mouseUp. If yes, then we won't call the onClick handler. A way to improve on this would be keeping track of the cursor position (should it also be done with state?) and suppressing the onClick only if distance moved is greater than e.g. 4px. Let me know if you have any suggestions, etc.

SanderSpies commented 9 years ago

Might be interesting to take inspiration from: https://github.com/JedWatson/react-tappable/blob/master/src/Tappable.js. If it's possible we could use that library to help with our touch issues (haven't extensively looked into it though).