ManicardiFrancesco
commented
8 hours ago Some additional info I gathered in the past hour:
The workaround I showed in the StackBlitz works by setting this css rule on the tooltip trigger element:
touch-action: auto !important;
I don't know why this works since the initial value of touch-action is supposed to be auto anyway according to the MDN web docs - I checked the elements on my repro with inspect element and i confirmed that there is no touch action rule set on them.
Note that the !important is required - the css rule by itself doesn't seem to fix the issue for some reason.
I'm really confused by this behavior as chrome devtools show that the value is applied to the element even without using !important
In my Stackblitz repo I also tried playing around with the matTooltipTouchGestures - but no allowed value seem to achieve the desired effect (The tooltip shows correctly if you long press the element but you can also scroll if you want)
Is this a regression?
The previous version in which this bug was not present was
According to Issue 4892, this bug should've been fixed in Angular 11+
Description
Scrolling on a touch device doesn't work if the target of the gesture is an element using matTooltip. This is apparently a regression as people mentioned it being fixed in angular 11+: https://github.com/angular/components/issues/4892
Tagging @wagnermaciel @crisbeto and @jelbourn as they commented on the previous issue.
Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-nnqsnt?file=src%2Fmain.html Steps to reproduce:
I also included a CSS workaround which appears to be working but shouldn't be necessary.
Expected Behavior
Scrolling behavior should not be affected by the presence or absence of a mat tooltip.
Actual Behavior
Scrolling behavior is disabled by targeting a mat tooltip element.
Environment
Angular: 19.0.0 ... animations, build, cli, common, compiler, compiler-cli, core ... forms, material, platform-browser, router
Package Version
@angular-devkit/architect 0.1900.0 @angular-devkit/core 19.0.0 @angular-devkit/schematics 19.0.0 @schematics/angular 19.0.0 rxjs 7.8.1 typescript 5.6.3 zone.js 0.15.0
CDK/Material: "@angular/material": "^19"
Browser(s): Firefox
Operating System (e.g. Windows, macOS, Ubuntu): Android