angular / angular/components

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

Aperta
#19,241 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: cdk/drag-drop P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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):

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dal metodo _startScrollingIfNecessary mostrato nell’issue e segui la sua interazione con _stopScrolling e le proprietà dello stato di scorrimento automatico. Riproduci la sequenza nella demo ng-run collegata, quindi verifica che la ripetizione della sequenza di trascinamento e rilascio riavvii lo scorrimento automatico dopo il rilascio di un elemento durante lo scorrimento.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.