components icon indicating copy to clipboard operation
components copied to clipboard

bug(cdkScrollable): Drag horizontal scrolling with cdkDropList item and cdkScrollable not working when dir = RTL

Open namnguyen2020 opened this issue 2 years ago • 0 comments

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

namnguyen2020 avatar Dec 25 '23 02:12 namnguyen2020