[Android] ScrollView with TextInput not detecting Scroll Gesture #29025

fabOnReact · 2020-06-01T18:35:43Z

Summary

This issue fixes #25594 fixes #12167 fixes #13997
The ScrollView functionality is not compatible with TextInput scrolling. This pull request implements the scroll functionality of a TextInput in a ScrollView and fixes a bug causing ScrollView to not detect scroll gesture when including a TextInput with textAlign center.

ADDITIONAL INFORMATION
canScrollHorizontally(-1) detects if a TextInput can scroll to the right, but it does not work with Gravity.CENTER. Consequence is that the TextInput can not be scrolled right and the parent component (in our example a ScrollView) is instead scrolled. For this reason the TextInput Gravity is set to Gravity.LEFT when focused for editing and set back to Gravity.CENTER once the focus leaves the TextInput. Similar issues with scrolling left (the TextInput never reaches the end).

This commit uses event onScrollChanged to set the gravity back to Gravity.CENTER if previously resetted. The gravity is set back to Gravity.CENTER once the focus leaves the TextInput and the Scrolling is ended.

The functionality allows the user to Scroll Both the TextInput and the Parent once the TextInput reached his end, yet other
functionality make the TextInput always move to his cursor position, which means that the cusor should move to scroll the TextInput, but changes to this that should be discussed in another pull request.

Changelog

[Android] [Fixed] - ScrollView with TextInput not detecting Scroll Gesture and issues with textAlign center

Test Plan

CLICK TO OPEN TESTS RESULTS

This pull request solves problems connected to 372d001 as explained in #25749 (comment) and #25749 (comment)

The below example is available in RNTester.

AFTER	AFTER

analysis-bot · 2020-06-01T18:56:44Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 4324ca8

analysis-bot · 2020-06-01T19:26:03Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,891,621	+544
android	hermes	armeabi-v7a	8,395,354	+555
android	hermes	x86	9,380,881	+551
android	hermes	x86_64	9,323,603	+545
android	jsc	arm64-v8a	10,341,169	+118
android	jsc	armeabi-v7a	9,827,993	+117
android	jsc	x86	10,391,927	+114
android	jsc	x86_64	10,974,895	+104

Base commit: 4324ca8

facebook-github-bot

@JoshuaGross has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

JoshuaGross · 2020-07-01T22:45:30Z

@fabriziobertoglio1987 This doesn't work quite as I would expect. Specifically, in the second "horizontal" example, I can scroll the TextInput left but it seems there's no way to scroll the TextInput right, even if my finger is touching the TextInput and not the ScrollView space. That doesn't feel intuitively correct to me?

JoshuaGross · 2020-07-01T22:48:16Z

Maybe there's a different repro that would help me understand the issue. Using the example you provided, it seems correct without any Java changes and doesn't feel right with these Java changes.

canScrollHorizontally(-1) detects if a TextInput can scroll to the right, but it does not work with Gravity.CENTER. Consequence is that the TextInput can not be scrolled right and the parent component (in our example a ScrollView) is instead scrolled. For this reason the TextInput Gravity is set to Gravity.LEFT when focused for editing and set back to Gravity.CENTER once the focus leaves the TextInput. canScrollHorizontally(1) is used for detecting that a TextInput can scroll left, but does not work with Gravity.CENTER. The TextInput will not scroll to the last character and canScrollHorizontally(1) returns allways true with Gravity.CENTER. Consequence is scroll is never delegated to the parent View (ScrollView in our example) and the parent view (ScrollView) can not be scrolled left once the end of the TextInput is reached. I was aware of this issue and fixed previously by with setGravity.(Gravity.LEFT), but I did not use the correct event for settings the gravity back to Gravity.CENTER. This commit uses event onScrollChanged to set the gravity back to Gravity.CENTER if previously resetted. The gravity is set back to Gravity.CENTER once the focus leaves the TextInput and the Scrolling is ended.

as explained in previous commit de24234 canScrollHorizontally() does not work with Gravity.CENTER. For this reason we set the Gravity to LEFT once the focus is moved into the TextInput and the user edits the TextInput content, once the TextInput loses the focus, the Gravity is set back to CENTER. The functionality allows the user to Scroll Both the TextInput and the Parent once the TextInput reached his end, yet other functionality make the TextInput always move to his cursor position, which means that the cusor should move to scroll the TextInput, but changes to this that should be discussed in another pull request.

fabOnReact · 2020-07-02T18:01:51Z

Thanks a lot and Sorry @JoshuaGross for my mistakes.

The changes to fix the current Java functionalities are included in commits de24234 514da13 and 5a8bf3a.
The commits messages include additional explanation of the changes.

I also improved RNTester to be easy to test with a Real Device. I tested with two devices and did not experience anymore issues.

Thanks a lot for your help and tolerance for my errors.
Sorry
I remain available for additional improvements
I wish you a good day
Fabrizio

HORIZONTAL	AFTER

facebook-github-bot

@JoshuaGross has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

JoshuaGross · 2020-07-07T23:52:19Z

@fabriziobertoglio1987 No need to apologize, I appreciate you spending time on this.

I think the onscroll code makes sense now. My only remaining concern is with the scroll gravity logic - is it necessary? I think it could break some TextInputs if the default gravity for that TextInput isn't specified as LEFT. It seems to work fine without the gravity bit at all?

fabOnReact · 2020-07-08T09:47:15Z

@JoshuaGross thanks a lot for the reviewing this pull request. I appreciate your feedback.

QUESTION 1

I think the onscroll code makes sense now. My only remaining concern is with the scroll gravity logic - is it necessary?

The previous functionality was built in 372d001, @andreicoman11 may also have an interesting opinion on this change.

As demonstrated in the comment below from #25749 (comment), commits de24234, 514da13, summary #29025 (comment), canScrollHorizontally does not work with Gravity.CENTER (scrolling left and right). Set Gravity.Center to Gravity.LEFT fixes issues #25594, #12167 and #13997.

The code below does not work with Gravity.CENTER:

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

Lines 183 to 184 in cfa4260

    
           && !canScrollHorizontally(-1) 
        
           && !canScrollHorizontally(1)) {

The issue is caused by canScrollHorizontally returns allways true for:
<TextInput multiline={false} textAlign="center" />
The method definition of canScrollHorizontally.

QUESTION 2

I think it could break some TextInputs if the default gravity for that TextInput isn't specified as LEFT. It seems to work fine without the gravity bit at all?

I am not currently aware of those scenarios, but I will keep researching. I did not invest time searching for an alternative solution to 514da13. Commit 514da13 fixes #25594, #12167 and #13997

I will be contributing to ReactNative master full-time until end of August 2020 and I will solve any related issue to this pull request in 1-2 days. I am subscribed to all react-native threads and I read all Android related issues or comments via email. I also reply to all messages if tagged as I have specific email filters that notify me. I am also willing to write test coverage for this functionality, if you are considering merging the pull request.

I think it could break some TextInputs if the default gravity for that TextInput isn't specified as LEFT

I believe the workaround will only change the Gravity of the TextInput with Gravity.CENTER to Gravity.LEFT onFocus and set it back to Gravity.CENTER once the TextInput is not focused anymore.

  @Override
  protected void onFocusChanged(boolean focused, int direction, Rect previouslyFocusedRect) {
    super.onFocusChanged(focused, direction, previouslyFocusedRect);
    if (focused && mSelectionWatcher != null) {
      mSelectionWatcher.onSelectionChanged(getSelectionStart(), getSelectionEnd());
    }
    boolean resetGravity = getGravity() == Gravity.CENTER &&
      mMultiLine == false;
    if(focused && resetGravity) {
      setGravity(Gravity.LEFT);
      mGravityReset = true;
    };
    if(!focused && mGravityReset) {
      setGravity(Gravity.CENTER);
      mGravityReset = false;
    };

I remain availalbe for further help and additional changes.
Thanks a lot
I wish you a good day
Fabrizio Bertoglio

…rollviews

analysis-bot

Code analysis results:

google-java-format found some issues. See https://github.com/google/google-java-format

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

analysis-bot

Code analysis results:

google-java-format found some issues. See https://github.com/google/google-java-format

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

more info in comment facebook#29025 (comment)

fabOnReact added 3 commits June 1, 2020 19:02

TextInput scroll gestures inside ScrollView

f5b99fc

RNTester example

5517bad

replace 19 with Gravity.LEFT

820799f

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jun 1, 2020

react-native-bot added Bug Platform: Android Android applications. labels Jun 1, 2020

fabOnReact added 3 commits June 1, 2020 20:58

fixing code formatting

ced39db

fixing issue with linting

0cf46c6

fix lint issues

2dd8a22

remove java.lang.Math dependency

e5e4b02

fabOnReact changed the title ~~ScrollView with TextInput not detecting Scroll Gesture~~ [Android] ScrollView with TextInput not detecting Scroll Gesture Jun 3, 2020

facebook-github-bot reviewed Jul 1, 2020

View reviewed changes

fabOnReact added 6 commits July 2, 2020 17:33

increasing Height of TextInput/ScrollView in RNTester

18c714e

updating RNTester example

c19aa63

fixing vertical scroll

5a8bf3a

renaming RNTester example title

3c41d87

facebook-github-bot reviewed Jul 7, 2020

View reviewed changes

danielgindi mentioned this pull request Jul 20, 2020

Allow touches on overflowed children when overflow: visible (Android) #26374

Closed

Merge branch 'master' into fix-scrolling-issues-with-textinputs-in-sc…

7b4f134

…rollviews

fabOnReact mentioned this pull request Dec 7, 2020

TextInput prevent scroll on ScrollView #25594

Open

fabOnReact mentioned this pull request Dec 26, 2020

[Android] Scroll appears in TextInput with custom fonts and multiline=true #18132

Closed

fabOnReact mentioned this pull request Feb 8, 2021

nestedScrollEnabled prop not working in ScrollView (Android) with horizontal direction #21436

Closed

3 tasks

fabOnReact marked this pull request as draft February 15, 2021 17:04

Merge branch 'master' into fix-scrolling-issues-with-textinputs-in-sc…

2d25271

…rollviews

analysis-bot suggested changes Feb 16, 2021

View reviewed changes

fabOnReact added 2 commits February 16, 2021 11:24

updating test case title

ac6eeb4

google-java-format

b4148ce

analysis-bot suggested changes Feb 16, 2021

View reviewed changes

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java Outdated Show resolved Hide resolved

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java Outdated Show resolved Hide resolved

fabOnReact added 2 commits February 16, 2021 11:47

remove fix introduced with facebook@372d001

4f2a69f

more info in comment facebook#29025 (comment)

remove line - minor change

12eb234

fabOnReact marked this pull request as ready for review August 16, 2021 06:03

sota000 self-assigned this Aug 30, 2021

fabOnReact mentioned this pull request Sep 17, 2021

TouchableOpacity inside ScrollView trigger onPress while scrolling - Android only #27355

Closed

fabOnReact closed this Jan 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android] ScrollView with TextInput not detecting Scroll Gesture #29025

[Android] ScrollView with TextInput not detecting Scroll Gesture #29025

fabOnReact commented Jun 1, 2020 •

edited

Loading

analysis-bot commented Jun 1, 2020 •

edited

Loading

analysis-bot commented Jun 1, 2020 •

edited

Loading

facebook-github-bot left a comment

JoshuaGross commented Jul 1, 2020

JoshuaGross commented Jul 1, 2020

fabOnReact commented Jul 2, 2020

facebook-github-bot left a comment

JoshuaGross commented Jul 7, 2020

fabOnReact commented Jul 8, 2020

analysis-bot left a comment

analysis-bot left a comment

[Android] ScrollView with TextInput not detecting Scroll Gesture #29025

[Android] ScrollView with TextInput not detecting Scroll Gesture #29025

Conversation

fabOnReact commented Jun 1, 2020 • edited Loading

Summary

Changelog

Test Plan

analysis-bot commented Jun 1, 2020 • edited Loading

analysis-bot commented Jun 1, 2020 • edited Loading

facebook-github-bot left a comment

Choose a reason for hiding this comment

JoshuaGross commented Jul 1, 2020

JoshuaGross commented Jul 1, 2020

fabOnReact commented Jul 2, 2020

facebook-github-bot left a comment

Choose a reason for hiding this comment

JoshuaGross commented Jul 7, 2020

fabOnReact commented Jul 8, 2020

analysis-bot left a comment

Choose a reason for hiding this comment

analysis-bot left a comment

Choose a reason for hiding this comment

fabOnReact commented Jun 1, 2020 •

edited

Loading

analysis-bot commented Jun 1, 2020 •

edited

Loading

analysis-bot commented Jun 1, 2020 •

edited

Loading