angular / angular/components

cdkDrag: with cdkDropList -> wrong Cursor when dragging

Open
#20,246 14 comments 8 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

Hi all,
![issue_1](https://user-images.githubusercontent.com/10813063/88395832-f91c8700-cdc1-11ea-9184-9188f1340b8c.png)
![issue_2](https://user-images.githubusercontent.com/10813063/88395836-f9b51d80-cdc1-11ea-8e1f-794c089706d6.png)

**Here is a little sample.**
[https://stackblitz.com/angular/yvmnrxexppp?file=app%2Fcdk-drag-drop-connected-sorting-example.html](url)

Since version 7.2.x (I noticed) there is the problem that the cursor (set in CSS) adapts to the underlying object during the dragging process.

If the cursor is changed to "move" and I use e.g. move an "input" (drag) then the cursor changes from move to input.

This phenomenon only occurs with cdkDropList, not when the cdkDrag property is only set for a single object.

The CSS:
```css
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);

display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
}
```

The HTML:
```html


Still Doing


{{item}}




```

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the cdkDrag and cdkDropList behavior while dragging an input element. Confirm the cursor changes from move to the underlying element's cursor only when cdkDropList is present; done means the drag cursor remains consistent throughout the drag.

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
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.