angular / angular/components

Cdk Drag Item With Boundaries Breaks on Touch Screen Pinch

Open
#33,026 0 comments 0 reactions 0 assignees View on GitHub
area: cdk/drag-drop area: core gemini-triaged P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Which @angular/* package(s) are the source of the bug?

Don't known / other

### Is this a regression?

No

### Description

Go to your website to this link: https://angular.dev/guide/drag-drop#restrict-movement-within-an-element on a touch screen device
1. Go to the cdkDrag item with the boundaries.
2. Start a pinch motion with one finger on the drag item and one outside
3. Try a few times because it does work every time
4. Observe the cdkDrag item float out of the area

### Please provide a link to a minimal reproduction of the bug

https://angular.dev/guide/drag-drop#restrict-movement-within-an-element

### Please provide the exception or error you saw

```true
This error on every touch move event
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
```

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI: 20.3.20
Node: 22.14.0
Package Manager: npm 10.9.2
OS: win32 x64

Angular: 20.3.18
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser, router

Package Version
---------------------------------------
@angular-devkit/architect 0.2003.20
@angular-devkit/build-angular 20.3.20
@angular-devkit/core 20.3.20
@angular-devkit/schematics 20.3.20
@angular/build 20.3.20
@angular/cdk 20.2.14
@angular/cli 20.3.20
@angular/material 20.2.14
@schematics/angular 20.3.20
ng-packagr 20.3.2
rxjs 7.8.2
typescript 5.9.3
zone.js 0.15.1
```

### Anything else?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the Angular CDK drag-drop example at angular.dev/guide/drag-drop#restrict-movement-within-an-element and reproduce the issue on a touch screen using the described pinch gesture. Trace the drag item's touchmove handling and the cancelable=false intervention; done means the item stays within its boundary during the gesture without the reported error.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.