react / react/react-native

[Android] Tapping selectable text inside a ScrollView can cause the ScrollView to jump to the top under some circumstances

Abierto
#33,419 10 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: ScrollView Needs: Triage :mag: Never gets stale Platform: Android
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

Description

After selectable text inside a ScrollView has been touched in a way that neither creates a selection nor scrolls the ScrollView, certain interactions cause the ScrollView to scroll to the top.
(I'm not sure exactly what set of events are necessary to trigger the jump, but I have a text unloading algorithm that consistently causes it. The issue may be specific to large or nested Texts, and may have to do with content changing as the result of a scroll event? Changing the content of the text in a setInterval didn't seem to be enough to cause it, so I just copied the unloading algorithm out of my codebase.)

As a workaround, updating the key prop on the selectable text component seems to clear the glitched state.

Version

0.67.3 (originally observed on 0.64.1)

Output of npx react-native info
info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 3.72 GB / 15.76 GB
  Binaries:
    Node: 17.7.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.5.2 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.10.31402.337 (Visual Studio Community 2019), 15.9.28307.1033 (Visual Studio Community 2017)
  Languages:
    Java: 1.8.0_282 - C:\Program Files\OpenJDK\openjdk-8u282-b08\bin\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.67.3 => 0.67.3
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Steps to reproduce
  1. Run the Snack below on an Android device (Snack's provided one or your own).
  2. Scroll up and down; observe that scrolling works as expected.
  3. Tap on the text without starting a selection or scrolling. (Tapping to cancel a selection works.)
  4. Try scrolling again; observe that the scroll jumps to the top now.
Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/b2Vgmc_4L
Set USE_WORKAROUND to true to see the workaround in action (this breaks the ability to actually select text, but if you need to use this in production, you can use https://github.com/artemiswkearney/react-native-selectable-text to add an onSelectionStart handler where you cancel running the workaround)

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza ejecutando el Expo Snack enlazado en un dispositivo Android y siguiendo sus pasos de desplazamiento y pulsación, incluida la opción USE_WORKAROUND. Investiga la interacción entre Android ScrollView y el texto seleccionable descrita en la reproducción. Se considera terminado cuando el desplazamiento ya no salta al principio después de una pulsación que de otro modo no seleccionaría nada, mientras la selección de texto sigue funcionando sin el workaround.

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

Evaluación

Stack tecnológico
android, react-native
Área
mobile
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.