react-hint icon indicating copy to clipboard operation
react-hint copied to clipboard
verified publisher icon slmgc

Shouldn't respond to the scroll event on mobile device

Open togepige opened this issue 7 years ago • 7 comments

Hey I just found a little problem on mobile device that the hint will be triggered when I hold my finger on the target and then scroll the screen even I set the events to "click".

I think it is not the expected behavior as holding and scrolling should not trigger click on mobile device. I guess the reason is because in the last line of toggleEvent function you register a handler for "touchend" even for click?

ToggleEvent function

togepige avatar Mar 22 '18 06:03 togepige

This is related to another bug: https://github.com/slmgc/react-hint/issues/12 Basically, there was an issue with click events in iOS, that's why a touch event handler was introduced. Removing this handler is not an option as it will break the tooltip for iPhone users, but I am open to suggestions.

slmgc avatar Mar 22 '18 18:03 slmgc

Hey Vladimir,

Thanks for a quick reply! So what about just remove that touchend handler for click? Sounds like we the touchend should only apply to hover for hiding the tooltip I guess? And for click I don't think touchend event is necessary as all we need is a click event?

Some thing like this: Before: ;(click || hover || hasEvents) && document[action]('touchend', this.toggleHint) To: ;(hover || hasEvents) && document[action]('touchend', this.toggleHint)

togepige avatar Mar 22 '18 19:03 togepige

Hey Junkai! Thanks for this suggestion, I'll check it out and see if it resolves the issue.

slmgc avatar Mar 22 '18 20:03 slmgc

Ok, I've checked your proposal and it seems it's not an option to remove a touch event handler for click events as it breaks tooltips in iOS.

slmgc avatar Mar 27 '18 15:03 slmgc

@cyfloel0516 can you provide a repro with your case so I can try to figure out a way to solve it?

slmgc avatar Mar 29 '18 17:03 slmgc

Hey @slmgc! I don't have a repo to show you now. But actually you can simply use your Demo Page to reproduce the issue.

Two ways to reproduce:

  1. With chrome debugger: debug the website with mobile device mode. Then hold the mouse on one of those two green buttons("Click Me") and move the mouse(simulate scrolling). You can see it the hint will be opened or closed.

  2. Open the Demo Page with iPhone and do the same thing as way 1. And you can see it will open(or close) the hint as well.

togepige avatar Mar 30 '18 18:03 togepige

Hey, I am currently working on the new API which will allow more freedom in trigger-events customization. This should resolve your use-case.

slmgc avatar Jun 14 '18 18:06 slmgc