angular / angular/components

bug(drag-drop): cdkDropListSortingDisabled interacts badly with connected lists

Open
#23,766 4 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

This is a fork of the "disable sorting" example from the docs.

https://stackblitz.com/edit/angular-lcgpvd?file=src/app/cdk-drag-drop-disabled-sorting-example.ts

Steps to reproduce:
1. Open example
2. Drag an item from one list to another


#### Expected Behavior

One of the following, internally-consistent behaviors:

* the receiving list provides some way of determining where the incoming item will be sorted
* the incoming item always goes before the first item
* the incoming item always goes after the last item

#### Actual Behavior

The incoming item gets a placeholder wherever the user drags it, but then can't be moved. The user can continue dragging back to the original list, so the placeholder goes back to the original position then drag over the target list again to put the placeholder in a new position -- but again, can't move the placeholder directly.

#### Environment

- Angular: 12.2.9
- CDK/Material: 12.2.9
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Win10

#### Comments

I'd like to see the first behavior implemented -- let me supply a sort-function that gets the dragged item's `data` (and maybe the index in its current container?) as an input and outputs the list index at which the placeholder should be inserted. Failing that, I'd at least like a property that lets me say that, since sorting is disabled, the placeholder should go at the "start" or "end".

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz example at src/app/cdk-drag-drop-disabled-sorting-example.ts and reproduce dragging between connected lists with sorting disabled. Then trace the CDK drag-drop connected-list behavior that places the placeholder. Done means choosing and implementing one consistent receiving-list behavior, with coverage for the reported reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.