Material: md-tooltip eats the button click on mobile

[STOpandthink]

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]

is there a codepen avail?

[STOpandthink]

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 [email protected] wrote:

is there a codepen avail?

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/6792#issuecomment-173439565.

[0101adm]

cannot reproduce.

although, that is in device emulation mode.

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

[STOpandthink]

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 [email protected] 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
https://github.com/angular/material/issues/6792#issuecomment-173441631.

[0101adm]

it could be a conflict from another lib.

[zilions]

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.

[FDIM]

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]

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

[FDIM]

@schmkr thanks for the fix!

[rfuhrer]

+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.

[stephengardner]

@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.