[Tooltip] Prevents normal scrolling

[savaryt]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Scrolling should work.

What is the current behavior?

Scrolling on a touch device doesn't work if the target of the gesture is an element using the mdTooltip Directive.

What are the steps to reproduce?

Add the mdTooltip Directive on any element.
Use a mobile device / emulator to scroll the document, while targeting the element on which you set the directive.
Scrolling doesn't work.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"dependencies": {
    "@angular/animations": "^4.1.2",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.6",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.3",
    "@ngrx/router-store": "^1.2.6",
    "@ngrx/store": "^2.2.2",
    "angularfire2": "^4.0.0-rc.0",
    "core-js": "^2.4.1",
    "firebase": "^3.9.0",
    "hammerjs": "^2.0.8",
    "localforage": "^1.5.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  }

[kekel87]

I've got the same problem.
I found a solution by overriding the Hammer configuration class :

app.module.ts

import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser'
import { MyGestureConfig } from './config/my-gesture-config';

@NgModule({
	...
	providers: [
		{
			provide: HAMMER_GESTURE_CONFIG,
			useClass: MyGestureConfig
		}
	]
	...
})

my-gesture-config.ts

import { Injectable } from '@angular/core';
import { GestureConfig } from '@angular/material';

@Injectable()
export class MyGestureConfig extends GestureConfig {
    buildHammer(element: HTMLElement) {
        let mc = <HammerManager>super.buildHammer(element);
        
	mc.set({ touchAction: "pan-y" });

        // Your other configurations
        mc.get('swipe').set({ velocity: 0.3, threshold: 10 });

        return mc;
    }
}

[jpduckwo]

@kekel87 thanks for the workaround. It solved it for me too.

[mackelito]

is this something that will be fixed in a upcomming release? or should we handle it on our own?

[drullo]

I just started having this problem with Material version 7.1.1 on apps that never had the problem before. matTooltip is preventing scrolling on matTable data rows from touch devices.

The workaround described above does work for my apps. But I think this bug needs to be addressed so that a workaround isn't required.

Here's a simple sample app

[schroedermarius]

Poking this issue, because its still a big problem. You can't have scrolling in responsive layout with mat-table when you also have tooltips on rows.

[mhmo91]

FYI, the directive mat-button have the same behaviour too when ripples are enabled

[CAlex-Wilson]

The workaround solution above does not work as of 8.0.0. The tooltips still prevent touch scrolling on all applicable components. This is a serious issue. This prevents responsive design as shown here: Stack Overflow Question

[jnfaerch]

Just chiming in with the same issue. Should get fixed ASAP

[Ploppy3]

The workaround provided by @kekel87 is not working anymore since GestureConfig is deprecated and will be removed, due to the removal of HammerJs from @angular/material.

We need a solution to this problem.