[Android] Fix non selectable Text in FlatList #28952

fabOnReact · 2020-05-22T13:35:57Z

Summary

This issue fixes #26264 fixes #27107
Text is not selectable inside a FlatList on Android. The solution is to invalidate the ReactTextView after a change of the selectable prop. If the view is visible, onDraw(android.graphics.Canvas) will be called at some point in the future and make the Text selectable.

Changelog

[Android] [Fixed] - Fix non selectable Text in FlatList

Test Plan

CLICK TO OPEN TESTS RESULTS

The issue was demonstrated in the following snack (more info in issue #26264).

The solution is:

Calling invalidate() from setSelectableText after changing the selectable prop and mSelectableText value. invalidate() triggers the onDraw callback.

calling setTextIsSelectable(mSelectableText); from the onDraw callback

The example below is availabe in RNTester FlatList example. Two options (onPressDisabled and textSelectable) have been added to test the functionality inside a FlatList.

analysis-bot · 2020-05-22T13:58:39Z

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

Base commit: 8a8a532

analysis-bot · 2020-05-22T14:01:37Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	9,189,062	+57
android	hermes	armeabi-v7a	8,714,683	+45
android	hermes	x86	9,630,923	+44
android	hermes	x86_64	9,598,667	+51
android	jsc	arm64-v8a	10,825,421	+204
android	jsc	armeabi-v7a	9,742,320	+207
android	jsc	x86	10,862,701	+214
android	jsc	x86_64	11,471,939	+203

Base commit: 8a8a532

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/text/ReactTextView.java

facebook-github-bot · 2021-07-29T22:35:33Z

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

ShikaSD · 2021-08-02T13:45:49Z

Hey, just noticed this PR in the internal review queue :)

Not sure doing this in each onDraw here is a correct solution (for performance and otherwise).
If the underlying reason for this change was to delay the update, doing it in postOnAnimation()/post() (whatever works) is more correct approach. If it was caused by some other issues (e.g. cleared on view removal), maybe we can use onAttachedToWindow or some other callbacks to re-apply the value?
E.g.:

public void setSelectableText(boolean value) {
  postOnAnimation(new Runnable() {
    @Override
    public void run() {
      setTextSelectable(value)    
    }
  });
}

Code Review from ShikaSD facebook#28952 (comment) A similar solution was merged to master for a similar problem with TextInput inside FlatList facebook#28852

fabOnReact · 2021-08-04T08:07:54Z

Thanks a lot ShikaSD for the code review.

after some investigation I notice that

The change was already applied with commit 89340f1 and then reverted later with commit 862136a

https://github.com/facebook/react-native/commits/main?after=363a8fb08cef8326bba53cd3ea250bde02444126+34&branch=main&path%5B%5D=ReactAndroid&path%5B%5D=src&path%5B%5D=main&path%5B%5D=java&path%5B%5D=com&path%5B%5D=facebook&path%5B%5D=react&path%5B%5D=views&path%5B%5D=text&path%5B%5D=ReactTextView.java

The title of the revert Revert the suspicious text input change for now seems to indicate a problem with TextInput and not Text component, I will further analyse in the upcoming days if this change introduces regressions.

The fix was reverted due to a regression with commit facebook@862136a. I will investigate this change and verify that no regression are introduced

facebook-github-bot · 2021-08-17T21:05:51Z

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

facebook-github-bot · 2021-09-01T22:28:44Z

@lunaleaps merged this pull request in c360b1d.

calling setError does not display an error if the TextInput is a controlled component. https://reactnative.dev/docs/textinput#value >The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set editable={false}, or set/update maxLength to prevent unwanted edits without flicker. ```javascript function ErrorExample(): React.Node { const [text, setText] = React.useState(''); const [error, setError] = React.useState(null); return ( <TextInput errorMessage={error} onChangeText={newText => { setText(newText); setError(newText === 'error' ? 'this input is invalid' : null); }} value={text} /> ); } ``` The solution from pr facebook#28952 fixes this issue and forces the update by invalidating the TextInput instance which triggers onAttachedToWindow() To be noticed that there is logic to trigger this updates in the ReactTextInputManager https://github.com/fabriziobertoglio1987/react-native/blob/60b6c9be8e811241039a6db5dc906a0e88e6ba82/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L1291-L1292 The PR was previously accepted and could be an acceptable solution for this issue

Zmwang622 · 2022-08-28T19:54:37Z

@fabriziobertoglio1987 I'm on version 0.64.3, and Text still isn't selectable in a FlatList. Any ideas? Setting removeClippedSubviews to false works but I don't want to sacrifice performance.

This is my code:

const MyClass = ({data}) => {
  const renderItem = useCallback(
      (item: key) => {
        return (
          <View>
              <Text selectable> {key} </Text>
              <Text selectable> {data[key]} </Text>
          </View>
        )
      }
   ,  [data])
  return <FlatList data={Object.keys(data)} renderItem={renderItem}
}

fabOnReact · 2022-08-28T22:34:34Z

@Zmwang622 I think it is part of 0.67 https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0670

Zmwang622 · 2022-08-29T16:39:05Z

@fabriziobertoglio1987 Ah okay got it, thanks for the quick response!

markedwards · 2023-09-11T12:43:01Z

I'm using react-native 0.72.4 and still need removeClippedSubviews={false} to enable text selection on Android.

fabOnReact added 3 commits May 22, 2020 10:50

trigger ReactTextView onDraw after change of selectable state

8027524

adding selectable switch to FlatListExample

8d1aacb

fix FlatListExample.js format (lint and flow checks)

86a8e38

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 May 22, 2020

react-native-bot added Bug Platform: Android Android applications. labels May 22, 2020

fabOnReact added 2 commits August 20, 2020 20:57

Merge branch 'master' into fix-text-selectable-in-flatlist

cbc50b9

Merge branch 'master' into fix-text-selectable-in-flatlist

16c23aa

analysis-bot suggested changes Feb 25, 2021

View reviewed changes

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java Outdated Show resolved Hide resolved

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java Outdated Show resolved Hide resolved

This was referenced Feb 25, 2021

Android: Text component not selectable when removeClippedSubviews #27107

Closed

Text in FlatList is not selectable on Android #26264

Closed

running google code linter

fb974ce

lunaleaps self-assigned this Jul 29, 2021

lunaleaps added the Needs: Author Feedback label Aug 2, 2021

Merge branch 'main' into fix-text-selectable-in-flatlist

b01c4d5

fabOnReact marked this pull request as draft August 4, 2021 06:06

fabOnReact added 2 commits August 4, 2021 15:25

setTextIsSelectable onAttachedToWindow

d6f204d

Code Review from ShikaSD facebook#28952 (comment) A similar solution was merged to master for a similar problem with TextInput inside FlatList facebook#28852

add switch options to FlatListExample

7f5dad9

github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Aug 4, 2021

Reapply fix introduced with commit facebook@89340f1

f159764

The fix was reverted due to a regression with commit facebook@862136a. I will investigate this change and verify that no regression are introduced

fabOnReact marked this pull request as ready for review August 10, 2021 23:42

facebook-github-bot closed this in c360b1d Sep 1, 2021

facebook-github-bot added the Merged This PR has been merged. label Sep 1, 2021

fabOnReact mentioned this pull request Mar 12, 2022

iOS/Android: Text input error for screenreaders fabOnReact/react-native-notes#12

Closed

Abbondanzo mentioned this pull request Apr 27, 2023

[Android] Text in FlatList not selectable #37130

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Android] Fix non selectable Text in FlatList #28952

[Android] Fix non selectable Text in FlatList #28952

fabOnReact commented May 22, 2020 •

edited

Loading

analysis-bot commented May 22, 2020 •

edited

Loading

analysis-bot commented May 22, 2020 •

edited

Loading

analysis-bot left a comment

facebook-github-bot commented Jul 29, 2021

ShikaSD commented Aug 2, 2021

fabOnReact commented Aug 4, 2021 •

edited

Loading

facebook-github-bot commented Aug 17, 2021

facebook-github-bot commented Sep 1, 2021

Zmwang622 commented Aug 28, 2022 •

edited

Loading

fabOnReact commented Aug 28, 2022

Zmwang622 commented Aug 29, 2022

markedwards commented Sep 11, 2023

[Android] Fix non selectable Text in FlatList #28952

[Android] Fix non selectable Text in FlatList #28952

Conversation

fabOnReact commented May 22, 2020 • edited Loading

Summary

Changelog

Test Plan

analysis-bot commented May 22, 2020 • edited Loading

analysis-bot commented May 22, 2020 • edited Loading

analysis-bot left a comment

Choose a reason for hiding this comment

facebook-github-bot commented Jul 29, 2021

ShikaSD commented Aug 2, 2021

fabOnReact commented Aug 4, 2021 • edited Loading

facebook-github-bot commented Aug 17, 2021

facebook-github-bot commented Sep 1, 2021

Zmwang622 commented Aug 28, 2022 • edited Loading

fabOnReact commented Aug 28, 2022

Zmwang622 commented Aug 29, 2022

markedwards commented Sep 11, 2023

fabOnReact commented May 22, 2020 •

edited

Loading

analysis-bot commented May 22, 2020 •

edited

Loading

analysis-bot commented May 22, 2020 •

edited

Loading

fabOnReact commented Aug 4, 2021 •

edited

Loading

Zmwang622 commented Aug 28, 2022 •

edited

Loading