bug(cdkDrag): Issue scrolling/reordering "reversed" lists
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
For design/UX reasons, I'm using `cdk/drag-drop` on a list with `flex-direction: row-reverse` applied. Scrolling does not trigger while dragging among other issues.
Can we get a "reversed" option to support this use case?
### Reproduction
Steps to reproduce:`
1. Apply `display: flex; flex-direction: row-reverse;` to a `cdkDropList`
2. Try to drag+scroll an element
### Expected Behavior
It would be nice if indexes and scroll behavior could work intuitively by adding a `reversed` option
### Actual Behavior
The drag will not scroll the `cdkDropList`
### Environment
- Angular: v19.0.0
- CDK/Material: v19.0.0
- Browser(s): All
- Operating System: Ubuntu
Contributor guide
Research direction
Start with the cdkDropList drag-and-drop behavior using the listed reproduction: apply flex-direction: row-reverse and drag an element while scrolling. Trace how indexes and scrolling behave for the reversed list, then verify that scrolling works and ordering remains intuitive in the Angular 19 reproduction.
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