Skip to content

Commit

Permalink
fix(tooltip): avoid capturing the initial tap on mobile (#2423)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto authored and mmalerba committed Feb 21, 2017
1 parent 7c1c220 commit 85ba82a
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 13 deletions.
11 changes: 7 additions & 4 deletions src/lib/tooltip/tooltip.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down
29 changes: 20 additions & 9 deletions src/lib/tooltip/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
NgZone,
Optional,
OnDestroy,
Renderer,
OnInit,
ChangeDetectorRef
} from '@angular/core';
Expand All @@ -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';
Expand All @@ -55,8 +57,6 @@ export const SCROLL_THROTTLE_MS = 20;
host: {
'(longpress)': 'show()',
'(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')',
'(mouseenter)': 'show()',
'(mouseleave)': 'hide()',
},
exportAs: 'mdTooltip',
})
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -437,7 +448,7 @@ export class TooltipComponent {


@NgModule({
imports: [OverlayModule, CompatibilityModule],
imports: [OverlayModule, CompatibilityModule, PlatformModule],
exports: [MdTooltip, TooltipComponent, CompatibilityModule],
declarations: [MdTooltip, TooltipComponent],
entryComponents: [TooltipComponent],
Expand Down

0 comments on commit 85ba82a

Please sign in to comment.