[Android] Tapping selectable text inside a ScrollView can cause the ScrollView to jump to the top under some circumstances
Dieses Issue hat noch niemand übernommen.
- 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
- Run the Snack below on an Android device (Snack's provided one or your own).
- Scroll up and down; observe that scrolling works as expected.
- Tap on the text without starting a selection or scrolling. (Tapping to cancel a selection works.)
- 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
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Ö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