Conversation
Summary: Add a new RNTester example in ScrollViewExample for using the component with TextInputs. This reproduces the issue where TextInputs on Android absorb scroll gestures when textAlign is set to "center" or "right". For TextInputs inside a ScrollView, starting a scroll gesture on the TextInput would not scroll the ScrollView. As this is a common use case, the example acts as a reference to show intended behavior and prevent future regressions. Changelog: [Internal] Differential Revision: D122199421
Summary: Fixes the issue described in react#25594 and react#12167, where TextInputs on Android absorb scroll gestures when textAlign is set to "center" or "right". For TextInputs inside a ScrollView, starting a scroll gesture on the TextInput would not scroll the ScrollView. ### Root Cause The root cause is the `onTouchEvent()` function introduced in [commit 372d001](react@372d001). The smart scroll implementation checks if the TextInput can itself scroll in any direction. If it cannot, then the parent can intercept the gesture to apply normal scroll behavior. However, when textAlign is set to "center" or "right", `canScrollHorizontally()` returns true, as Android treats the TextInput as capable of scrolling left/right. In these cases, the existing conditional logic blocks all scroll gestures, even if a vertical swipe is applied. ### This PR Modify `ReactEditText` so that we only check to see if the TextInput can scroll in the direction of the provided touch gesture. If a TextInput can scroll horizontally but not vertically, vertical touch swipes will no longer interfere with the scroll gesture. Touch slop is also used to distinguish intentional swipe gestures from small micro-touch events. Changelog: [Android][Fixed] Prevent TextInput from preventing scroll gestures Differential Revision: D121519676
Summary: Fixes an Android-only bug where TextInputs can interfere with nested scroll gestures, causing scroll events to be performed on the outer parent instead of the inner ScrollView. ### Root Cause This issue occurs when you have a TextInput inside an inner ScrollView with `nestedScrollEnabled = true` inside an outer ScrollView. When a scroll gesture is performed on a TextInput that can scroll, the TextInput intercepts the gesture as expected. However, the next scroll gesture applied anywhere in the inner ScrollView scrolls the outer parent instead of the inner ScrollView. `inner.onInterceptTouchEvent()` calls `startNestedScroll()` on ACTION_DOWN and `stopNestedScroll()` on ACTION_UP. When the scroll gesture is on a scrollable TextInput, ReactEditText disallows parent views from intercepting touch events. This means on ACTION_UP, `inner.onInterceptTouchEvent()` and `stopNestedScroll()` is not triggered. Without `stopNestedScroll()`, the subsequent `startNestedScroll()` on the next ACTION_DOWN becomes a no-op, and the outer ScrollView intercepts the scroll gesture instead of the inner ScrollView. ### This PR Add a defensive `stopNestedScroll()` in `dispatchTouchEvent()` for ScrollViews. This matches the existing pattern already used by Android in `View.dispatchTouchEvent()` which includes the exact same defensive cleanup. Changelog: [Android][Fixed] Prevent TextInputs from interfering with nested scroll gestures Differential Revision: D122404118
|
@jasozh has exported this pull request. If you are a Meta employee, you can view the originating Diff in D122404118. |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
Fixes an Android-only bug where TextInputs can interfere with nested scroll gestures, causing scroll events to be performed on the outer parent instead of the inner ScrollView.
Root Cause
This issue occurs when you have a TextInput inside an inner ScrollView with
nestedScrollEnabled = trueinside an outer ScrollView. When a scroll gesture is performed on a TextInput that can scroll, the TextInput intercepts the gesture as expected. However, the next scroll gesture applied anywhere in the inner ScrollView scrolls the outer parent instead of the inner ScrollView.inner.onInterceptTouchEvent()callsstartNestedScroll()on ACTION_DOWN andstopNestedScroll()on ACTION_UP. When the scroll gesture is on a scrollable TextInput, ReactEditText disallows parent views from intercepting touch events. This means on ACTION_UP,inner.onInterceptTouchEvent()andstopNestedScroll()is not triggered.Without
stopNestedScroll(), the subsequentstartNestedScroll()on the next ACTION_DOWN becomes a no-op, and the outer ScrollView intercepts the scroll gesture instead of the inner ScrollView.This PR
Add a defensive
stopNestedScroll()indispatchTouchEvent()for ScrollViews. This matches the existing pattern already used by Android inView.dispatchTouchEvent()which includes the exact same defensive cleanup.Changelog: [Android][Fixed] Prevent TextInputs from interfering with nested scroll gestures
Differential Revision: D122404118