angular / angular/components

bug(drag-drop): Draggable elements inside SVG DropList not spawning underneath cursor

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

Description

#### Reproduction

Use StackBlitz to reproduce your issue:
- Components: https://stackblitz.com/fork/components-issue
- Harnesses: https://stackblitz.com/fork/harness-issue

Steps to reproduce:
1. Go to either https://stackblitz.com/edit/angular-droplist-with-previewcontainer?file=src/app/app.component.html
or https://stackblitz.com/edit/angular-droplist-without-previewcontainer?file=src/app/app.component.html
2. Drag the "Test" element to the other droplist
3. Release LMB


#### Expected Behavior

In both cases I would expect the "Preview" element to spawn next to the mouse cursor and to be dropped on the droplist under the cursor.

#### Actual Behavior

In the first example "with-previewcontainer" I use the `cdkPreviewContainer` attribute to spawn the "Preview" element inside the parent svg, in that case it spawns correctly, but the drop is offset. By moving the mouse cursor somewhere towards the bottom right of the page, the "Test" element can be seen moving to the other droplist.

In the second example "without-previewcontainer" the `cdkPreviewContainer` is omitted and the "Preview" element spawn at the top left of the page. The offset from the top left seems to correlate with the offset of the mouse cursor inside the droplist. Moving the mosue cursor far enough down and to the right will again make the "Test" element move to the other droplist.

The behaviour in Firefox seems to be slightly different.

#### Environment

- Angular: 12.2.6
- CDK/Material: 12.2.5
- Browser(s): Edge 93.0.961.52, Chrome 93.0.4577.82, Brave 1.29.81, Firefox 92.0.1
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Contributor guide

Open the contributing guide

Research direction

Start by running the two linked StackBlitz reproductions and inspect src/app/app.component.html, comparing the cdkPreviewContainer and omitted-container cases. Done means the preview appears beside the cursor and the element drops on the droplist under the cursor in both SVG examples, including the browser behavior described.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.