Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tapping Popover or Tooltip with trigger="click" on mobile doesn't open it #1425

Closed
hsource opened this issue Mar 5, 2019 · 8 comments
Closed

Comments

@hsource
Copy link
Contributor

hsource commented Mar 5, 2019

  • components: Tooltip, Popover (via TooltipPopoverWrapper)
  • reactstrap version #7.1.0
  • import method es
  • react version #x.x.x
  • bootstrap version #4.2.1

What is happening?

Tapping an UncontrolledPopover with trigger of click or legacy causes it to open briefly but close soon after.

What should be happening?

The popover should remain open

Steps to reproduce issue

  1. Open https://stackblitz.com/edit/reactstrap-cxz218?file=Example.js on phone (confirmed working on iOS Chrome and Safari)
  2. Try clicking "Launch popover"

Code

https://stackblitz.com/edit/reactstrap-cxz218?file=Example.js

hsource added a commit to hsource/reactstrap that referenced this issue Mar 5, 2019
For Popovers/Tooltips with trigger="click" or trigger="legacy", touches
on mobile were triggering touchstart and then click, which caused them
to open briefly and then immediately close. This removes the
touchstart event handling to fix behaviour on mobile.
hsource added a commit to hsource/reactstrap that referenced this issue Mar 5, 2019
For Popovers/Tooltips with trigger="click" or trigger="legacy", touches
on mobile were triggering touchstart and then click, which caused them
to open briefly and then immediately close. This removes the
touchstart event handling to fix behaviour on mobile.
TheSharpieOne pushed a commit that referenced this issue Mar 20, 2019
For Popovers/Tooltips with trigger="click" or trigger="legacy", touches
on mobile were triggering touchstart and then click, which caused them
to open briefly and then immediately close. This removes the
touchstart event handling to fix behaviour on mobile.
@hsandrade
Copy link

hsandrade commented Mar 20, 2019

Same thing here.
And if the popover content has an element with link like:
<a href="http://www.google.com" target="_blank">Test</a>
This link is activate automatically before de popover is closed (automatically too), if the popover is shown above the target element used to trigger.

@hsource hsource closed this as completed Mar 20, 2019
michaelmulley pushed a commit to elsevier-research/reactstrap that referenced this issue Apr 4, 2019
…eactstrap#1426)

For Popovers/Tooltips with trigger="click" or trigger="legacy", touches
on mobile were triggering touchstart and then click, which caused them
to open briefly and then immediately close. This removes the
touchstart event handling to fix behaviour on mobile.
@fcpauldiaz
Copy link

fcpauldiaz commented Apr 21, 2019

I'm still having this issue, is the fix released on npm ?

@kode-ninja
Copy link

kode-ninja commented May 5, 2019

Still having this issue too:

reactstrap 8.0.0
Chrome/Internet on Galaxy S9

Also: page turns unresponsive...

@jhblacklock
Copy link

jhblacklock commented Jul 5, 2019

Seeing this issue as well with the Tooltip component and 8.0.0.

If triggers="click hover", the result is having to click the button twice to show the Tooltip.

If triggers="click", the Tooltip will show on first click, but it loses the mouseout event handling, so the user has to click on the target to close the tooltip. If the target is hidden by the tooltip body, there is no way for the tooltip to be closed.

https://stackblitz.com/edit/reactstrap-v8-otxfh4?file=Example.js

@jhblacklock
Copy link

jhblacklock commented Jul 5, 2019

Forcing a delay e.g. delay={{ show: 300, hide: 300 }}, fixes this issue. The problem is the hover and click events fire one after another.

In mobile, mouseenter fires just before the click event, resulting in showWithDelay and handleDocumentClick to be called within ms of each other.

@rmlevangelio
Copy link

Still having this issue. This also crashes the mobile browser. You can try it by clicking the tooltip on mobile multiple times.

@13it235
Copy link

13it235 commented Nov 7, 2019

Forcing a delay e.g. delay={{ show: 300, hide: 300 }}, fixes this issue. The problem is the hover and click events fire one after another.

In mobile, mouseenter fires just before the click event, resulting in showWithDelay and handleDocumentClick to be called within ms of each other.

This is an issue even in the case of Popover. However my trigger type was legacy. @jhblacklock your solution worked for me . However, is it the same reason that you've mentioned above even in the legacy case? Thank you.

@jhblacklock
Copy link

That is a good question. I'm not sure about that @13it235. But if the solution worked, then chances are it's the same issue 🤷‍♂ 😆

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants