From 85ba82a19946cceb884af07e2cef9849a4ccbbab Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 21 Feb 2017 21:28:27 +0100
Subject: [PATCH] fix(tooltip): avoid capturing the initial tap on mobile
 (#2423)

Currently the tooltip always binds the mouseenter and mouseleave events, however this can cause the click handlers on the tooltip host not to be fired on the first tap. These changes switch to binding the events only on devices that have touch events.

Fixes #2326.
---
 src/lib/tooltip/tooltip.spec.ts | 11 +++++++----
 src/lib/tooltip/tooltip.ts      | 29 ++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts
index 5873f340f0e6..bfb852af3982 100644
--- a/src/lib/tooltip/tooltip.spec.ts
+++ b/src/lib/tooltip/tooltip.spec.ts
@@ -18,8 +18,10 @@ import {TooltipPosition, MdTooltip, MdTooltipModule, SCROLL_THROTTLE_MS} from '.
 import {OverlayContainer} from '../core';
 import {Dir, LayoutDirection} from '../core/rtl/dir';
 import {OverlayModule} from '../core/overlay/overlay-directives';
+import {Platform} from '../core/platform/platform';
 import {Scrollable} from '../core/overlay/scroll/scrollable';
 
+
 const initialTooltipMessage = 'initial tooltip message';
 
 describe('MdTooltip', () => {
@@ -31,6 +33,7 @@ describe('MdTooltip', () => {
       imports: [MdTooltipModule.forRoot(), OverlayModule],
       declarations: [BasicTooltipDemo, ScrollableTooltipDemo, OnPushTooltipDemo],
       providers: [
+        Platform,
         {provide: OverlayContainer, useFactory: () => {
           overlayContainerElement = document.createElement('div');
           document.body.appendChild(overlayContainerElement);
@@ -421,10 +424,10 @@ class BasicTooltipDemo {
     <div cdk-scrollable style="padding: 100px; margin: 300px;
                                height: 200px; width: 200px; overflow: auto;">
       <button *ngIf="showButton" style="margin-bottom: 600px"
-              [md-tooltip]="message"		
-              [tooltip-position]="position">		
-        Button		
-      </button>		
+              [md-tooltip]="message"
+              [tooltip-position]="position">
+        Button
+      </button>
     </div>`
 })
 class ScrollableTooltipDemo {
diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts
index 7b27abaa3968..fc621826beaf 100644
--- a/src/lib/tooltip/tooltip.ts
+++ b/src/lib/tooltip/tooltip.ts
@@ -15,6 +15,7 @@ import {
   NgZone,
   Optional,
   OnDestroy,
+  Renderer,
   OnInit,
   ChangeDetectorRef
 } from '@angular/core';
@@ -32,6 +33,7 @@ import {MdTooltipInvalidPositionError} from './tooltip-errors';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {Dir} from '../core/rtl/dir';
+import {PlatformModule, Platform} from '../core/platform/index';
 import 'rxjs/add/operator/first';
 import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';
 import {Subscription} from 'rxjs/Subscription';
@@ -55,8 +57,6 @@ export const SCROLL_THROTTLE_MS = 20;
   host: {
     '(longpress)': 'show()',
     '(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')',
-    '(mouseenter)': 'show()',
-    '(mouseleave)': 'hide()',
   },
   exportAs: 'mdTooltip',
 })
@@ -129,12 +129,23 @@ export class MdTooltip implements OnInit, OnDestroy {
   get _matShowDelay() { return this.showDelay; }
   set _matShowDelay(v) { this.showDelay = v; }
 
-  constructor(private _overlay: Overlay,
-              private _scrollDispatcher: ScrollDispatcher,
-              private _elementRef: ElementRef,
-              private _viewContainerRef: ViewContainerRef,
-              private _ngZone: NgZone,
-              @Optional() private _dir: Dir) { }
+  constructor(
+    private _overlay: Overlay,
+    private _elementRef: ElementRef,
+    private _scrollDispatcher: ScrollDispatcher,
+    private _viewContainerRef: ViewContainerRef,
+    private _ngZone: NgZone,
+    private _renderer: Renderer,
+    private _platform: Platform,
+    @Optional() private _dir: Dir) {
+
+    // The mouse events shouldn't be bound on iOS devices, because
+    // they can prevent the first tap from firing it's click event.
+    if (!_platform.IOS) {
+      _renderer.listen(_elementRef.nativeElement, 'mouseenter', () => this.show());
+      _renderer.listen(_elementRef.nativeElement, 'mouseleave', () => this.hide());
+    }
+  }
 
   ngOnInit() {
     // When a scroll on the page occurs, update the position in case this tooltip needs
@@ -437,7 +448,7 @@ export class TooltipComponent {
 
 
 @NgModule({
-  imports: [OverlayModule, CompatibilityModule],
+  imports: [OverlayModule, CompatibilityModule, PlatformModule],
   exports: [MdTooltip, TooltipComponent, CompatibilityModule],
   declarations: [MdTooltip, TooltipComponent],
   entryComponents: [TooltipComponent],