angular / angular/components

bug(Drag and Drop): autoscroll fails in full size web view

Abierto
#27,169 5 comentarios 0 reacciones 0 asignados Ver en GitHub
area: cdk/scrolling P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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

When a hybrid mobile app (Ionic Capacitor) is made with a long list of draggable items, the autoscroll fails to engage. Take the same codebase and run it on a mobile browser, it fails. Run it on a desktop browser and it works.
Notice on a desktop browser that autoscrolling only begins when the cursor is outside the html page. It is not possible to get outside the page on a full screen mobile web view since touching outside that area is touching off the screen.

### Reproduction

Steps to reproduce:
1. Build a simple Ionic Capacitor mobile app with a list
2. Add CDK Drag and Drop elements to the list
3. Run it on a phone or phone browser.
4. Drag an item form the top to near the bottom.

### Expected Behavior

List should autoscroll up when touching near edge of phone.

### Actual Behavior

List fails to autoscroll.

### Environment

- Angular: 15.2.8
- CDK/Material: 15.2.9
- Browser(s): Safari, Safari Mobile
- Operating System (e.g. Windows, macOS, Ubuntu): macOS 12.6.6
- Ionic: 5.4.16
- Capacitor 5.0.3

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Reproduzca el comportamiento de Angular CDK Drag and Drop en la configuración de Ionic Capacitor descrita y en Safari Mobile, comparándolo con el comportamiento en navegadores de escritorio. Investigue el comportamiento de autoscroll durante un arrastre cerca del borde del viewport del teléfono; se considera terminado cuando una lista larga hace autoscroll al llegar el elemento arrastrado a ese borde.

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

Evaluación

Stack tecnológico
angular, typescript
Área
frontend, mobile-dev
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.