All touches, even scroll/swipe gestures trigger "onClick"
Closed this issue · 8 comments
EXPECTED/DESIRED: on Android and iOS when the rating component is on a page that is scrollable, don't "make a selection" if the scroll gesture starts on a symbol
ACTUAL (react: 16.8.6, react-rating: 1.7.2): any touch-up will trigger onClick
This should be fixable by either removing the onTouchEnd callback or modifying the onTouchEnd callback. I'm not certain that the event is being properly passed or handled by handleMouseClick(e)
It would be fine to have a prop that enables or disables processing onTouchEnd as a click.
Hi @Tawpie!
I think I see what you mean... So I assume that the rating pseudo-hovering on touch devices should be disabled in this case, right? Or you want both behaviors to coexist (hovering and scrolling)? For the former situation I think we could find an easy solution in combination with the quiet mode. For the latter, well, not sure yet 😅
If disabling hovering does the trick that's outstanding! I wouldn't have thought of combining it with quiet mode though—perhaps the prop's "whether to animate hovering" description could be updated. If quiet mode is the cleanest I'm all for that.
Release v2.0.6 should solve this issue, or at least, provide a reasonable alternative.
My first idea was to just ignore hovering on touch devices. However there already was an example on hovering over a quiet rating. It make sense to me but I don't want to break anything. I don't know if someone is relying on this behavior 😅. So, after some thought, I just decided to try to differentiate between click and swipe on touch devices. I kind of removed the swipe selection on quiet mode while keeping it on normal mode without removing the onHover event on both (as it is working now).
Hope it is enough or at least it does the trick for you. Let me know otherwise and we can try to find another way.
Thank you! I'll give it a whirl. Just verifying, I need to have the component in quiet mode?
Exactly 👍
The quiet mode should avoid triggering the click event on a swipe gesture.
BAM! Works great. Many thanks.
v2.0.6, with component's quiet prop set to {true} prevents selection of a rating when the user moves the touch point. Verified on iOS 13.5.1 (iPhone 6S+) and Android 10 system update 2020-05-01 (pixel 1).
I've just found this fix that solved my problem. Many thanks! Just one question - why is 2.0.6 not available in npm?