Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-tooltip eats the button click on mobile #6792

Closed
STOpandthink opened this issue Jan 21, 2016 · 11 comments
Closed

md-tooltip eats the button click on mobile #6792

STOpandthink opened this issue Jan 21, 2016 · 11 comments
Assignees
Labels
P1: urgent Urgent issues that should be addressed in the next minor or patch release.
Milestone

Comments

@STOpandthink
Copy link

If an md-button has a md-tooltip inside it, and you click on the button, the tooltip shows up, but the button doesn't receive a click event. A second click is necessary.

@0101adm
Copy link

0101adm commented Jan 21, 2016

is there a codepen avail?

@STOpandthink
Copy link
Author

Don't have a codepen set up (for some reason I've been having problems with
codepen and ngMaterial recently), but here is the bug in production:
http://arbital.com/pages/3560540392275264633
Try clicking the "like" or the "subscribe" or the "edit" button. You can
tell by the UI ink that the click isn't processed.

On Wed, Jan 20, 2016 at 7:27 PM, 0101adm notifications@github.com wrote:

is there a codepen avail?


Reply to this email directly or view it on GitHub
#6792 (comment).

@0101adm
Copy link

0101adm commented Jan 21, 2016

cannot reproduce.

although, that is in device emulation mode.

screencast 2016-01-20 20-44-22

also could not reproduce on my motox / android w/ chrome.

@STOpandthink
Copy link
Author

You have to be on the actual mobile device. Simulating a touch screen on
the laptop definitely doesn't reproduce it.
Interestingly enough, it fails to repdroduce in this codepen:
http://codepen.io/anon/pen/xZprem
http://codepen.io/anon/pen/xZprem

But I created a simple page on my website, and the bug is definitely there:
http://arbital.com/_test_/
I'm not doing anything different there, so I'm confused as to what's going
on.

On Wed, Jan 20, 2016 at 7:45 PM, 0101adm notifications@github.com wrote:

cannot reproduce.

[image: screencast 2016-01-20 20-44-22]
https://cloud.githubusercontent.com/assets/5133412/12471027/b673024e-bfb6-11e5-9984-cb829338f3ff.gif


Reply to this email directly or view it on GitHub
#6792 (comment).

@0101adm
Copy link

0101adm commented Jan 21, 2016

it could be a conflict from another lib.

@zilions
Copy link

zilions commented Jan 27, 2016

I am also having this same issue. It is not a conflict from another library. The tooltip is displayed on first click, and the click action is done on the second click. Not very effective.

@ThomasBurleson ThomasBurleson added the P1: urgent Urgent issues that should be addressed in the next minor or patch release. label Jan 27, 2016
@ThomasBurleson ThomasBurleson added this to the Backlog milestone Jan 27, 2016
@FDIM
Copy link
Contributor

FDIM commented Jan 29, 2016

I can confirm this issue as well. But for me it works correctly on chrome running on Android but not on iOS (both safari and chrome). To me it seems that single tap on ios is treated the same as long one on android.
Lastly, this behavior is not present in my older project based on v0.11.4 and ngTouch combination.

@schmkr
Copy link

schmkr commented Jan 29, 2016

I also had this issue and worked around it by adding md-delay="500" to each md-tooltip

@FDIM
Copy link
Contributor

FDIM commented Jan 29, 2016

@schmkr thanks for the fix!

@rfuhrer
Copy link

rfuhrer commented Feb 23, 2016

+1 and also a thanks to @schmkr for the fix. Unfortunately that doesn't work in one case. I have a button with a tooltip, and when you click that button it pops up a dialog. When you add in the md-delay attribute (no matter the setting, even 0) it fixes the need to double tap to actually press the button, but now it just pops up the tooltip on top of the dialog after it opens. So this doesn't really solve the problem either.

@ThomasBurleson ThomasBurleson modified the milestones: Backlog, Deprecated Apr 20, 2016
@stephengardner
Copy link

stephengardner commented Sep 12, 2016

@rfuhrer the following will solve your problem (if the dialog is not using any special parent config option):

body.md-dialog-is-showing md-tooltip {
  display: none; // hide the tooltip when the dialog is open due to bug on mobile devices
}

@ everyone else, yes, this is an issue. Tested on mobile safari with 1.1.0-rc.5, and adding md-delay works.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P1: urgent Urgent issues that should be addressed in the next minor or patch release.
Projects
None yet
Development

No branches or pull requests

9 participants