components
components copied to clipboard
bug(cdkScrollable): Drag horizontal scrolling with cdkDropList item and cdkScrollable not working when dir = RTL
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
I'm trying to provide horizontal scrolling while dragging a cdkDropList item with cdkScrollable. As of right now the page can't scroll with dir='rtl' (hebrew language).
Note: Works fine with dir='ltr'
Is there a way i can improve this
Reproduction
My html code:
<div [dir]="'rtl'">
<div class="dashboard" cdkScrollable>
<div class="d-flex" cdkDropListGroup>
<div class="board-list" *ngFor="let board of boards">
<div class="order-status-list" *ngIf="board">
<div class="px-3 pb-3 pt-3 fw-bold">
<span>
{{ board.status }}
</span>
</div>
<div class="order-card-container pl-2" cdkDropList [cdkDropListAutoScrollDisabled]="false" [cdkDropListAutoScrollStep]="10" [cdkDropListData]="board.orders" (cdkDropListDropped)="drop($event)" [id]="board.status">
<order-card *ngFor="let order of board.orders" [order]="order" [cdkDragData]="order" cdkDrag (cdkDragStarted)="dragStarted($event)" (cdkDragEnded)="dragEnded()"> </order-card>
</div>
</div>
</div>
</div>
</div>
</div>
Expected Behavior
I'm expecting horizontal scrolling while dragging a cdkDropList item with cdkScrollable when dir='rtl' (hebrew language).
Actual Behavior
I'm trying to provide horizontal scrolling while dragging a cdkDropList item with cdkScrollable. As of right now the page can't scroll with dir='rtl' (hebrew language).
Environment
- Angular: 14.2.0
- CDK/Material: 14.2.7
- Browser(s): Chrome Version 120.0.6099.129 (Official Build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 64-bit