fix(tooltip): avoid capturing the initial tap on mobile

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 angular#2326.
crisbeto · Feb 21, 2017 · 8e52c99 · 8e52c99
1 parent b939cd8
commit 8e52c99
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git 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
@@ -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],