angular / angular/components

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

Abierto
#19,241 0 comentarios 0 reacciones 0 asignados Ver en GitHub
area: cdk/drag-drop P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza por el método _startScrollingIfNecessary mostrado en el issue y sigue su interacción con _stopScrolling y las propiedades del estado de desplazamiento automático. Reproduce la secuencia en la demo de ng-run enlazada y, después, verifica que repetir la secuencia de arrastrar y soltar reinicia el desplazamiento automático después de soltar un elemento durante el desplazamiento.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.