react / react/react-native

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

Đang mở
#33,419 10 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Component: ScrollView Needs: Triage :mag: Never gets stale Platform: Android
Ngôn ngữ chính
C++
Star
127k
Fork
25.3k
Merge trung bình
1 ngày 23 giờ
Pull request đã merge (30 ngày)
4

Mô tả

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)

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu bằng cách chạy Expo Snack được liên kết trên thiết bị Android và thực hiện các bước cuộn và nhấn của nó, bao gồm tùy chọn USE_WORKAROUND. Điều tra tương tác giữa Android ScrollView và văn bản có thể chọn được mô tả trong bản tái hiện. Công việc được xem là hoàn tất khi thao tác cuộn không còn nhảy lên đầu sau một lần nhấn vốn không chọn gì, trong khi thao tác chọn văn bản vẫn hoạt động mà không cần workaround.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
android, react-native
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.