angular / angular/components

bug(drag-drop): Auto-scroll can break while dragging between drop lists

オープン
#19,241 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: cdk/drag-drop P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

Auto-scroll functionality can break if an item is dropped in a list while auto-scrolling, then attempting to perform that same auto-scroll sequence.

[ng-run demo](https://ng-run.com/edit/m0ciJ24IuzdCDaV31wVR)

1) Drag an item from one list to another while auto-scrolling.
2) While auto-scroll is still taking place (this is important), drop the item into the new list.
3) Scroll back to the original list and try the exact same sequence again with another item.

Auto-scrolling will stop once the item has entered the second drop list.

GIF demonstration:

![GIF](https://user-images.githubusercontent.com/23387905/80869228-467ad380-8c6d-11ea-9765-b3c64cf9a314.gif)

***Problem***

Auto-scroll properties (`_scrollNode`, `_verticalScrollDirection`, `horizontalScrollDirection`) are not being cleared when auto-scroll is stopped.

Upon the second auto-scroll sequence entering the bottom drop list, the following conditional statement (noted with the `HERE` comment) returns false because all the old (non-cleared) properties are the same as the current ones...yet auto-scroll should still be triggered.

```ts
/**
* Checks whether the user's pointer is close to the edges of either the
* viewport or the drop list and starts the auto-scroll sequence.
* @param pointerX User's pointer position along the x axis.
* @param pointerY User's pointer position along the y axis.
*/
_startScrollingIfNecessary(pointerX: number, pointerY: number) {
if (this.autoScrollDisabled) {
return;
}

let scrollNode: HTMLElement | Window | undefined;
let verticalScrollDirection = AutoScrollVerticalDirection.NONE;
let horizontalScrollDirection = AutoScrollHorizontalDirection.NONE;

//...

// <-- HERE-->
if (scrollNode && (verticalScrollDirection !== this._verticalScrollDirection ||
horizontalScrollDirection !== this._horizontalScrollDirection ||
scrollNode !== this._scrollNode)) {
this._verticalScrollDirection = verticalScrollDirection;
this._horizontalScrollDirection = horizontalScrollDirection;
this._scrollNode = scrollNode;

if ((verticalScrollDirection || horizontalScrollDirection) && scrollNode) {
this._ngZone.runOutsideAngular(this._startScrollInterval);
} else {
this._stopScrolling();
}
}
}
```

#### Environment

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

issue に示されている _startScrollingIfNecessary メソッドから始め、_stopScrolling および自動スクロール状態のプロパティとの相互作用を追跡します。リンクされた ng-run デモでシーケンスを再現し、その後、スクロール中に項目をドロップしたあとでドラッグ&ドロップのシーケンスを繰り返すと自動スクロールが再開されることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。