react / react/react-native

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

Offen
#33,419 10 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Component: ScrollView Needs: Triage :mag: Never gets stale Platform: Android
Vorherrschende Sprache
C++
Sterne
127k
Forks
25.3k
Ø Merge
1 T. 23 Std.
Gemergte PRs (30 T.)
4

Beschreibung

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)

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, den verknüpften Expo Snack auf einem Android-Gerät auszuführen und seine Schritte zum Scrollen und Tippen nachzuvollziehen, einschließlich der Option USE_WORKAROUND. Untersuche die in der Reproduktion beschriebene Interaktion zwischen Android ScrollView und auswählbarem Text. Als erledigt gilt die Aufgabe, wenn das Scrollen nach einem ansonsten nicht auswählenden Tippen nicht mehr zum Anfang springt und die Textauswahl weiterhin ohne den Workaround funktioniert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
android, react-native
Bereich
mobile
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.