[Android] Fix non selectable Text in FlatList by fabOnReact · Pull Request #28952 · react/react-native

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

Summary

This issue fixes#26264fixes#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

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 react#28952 (comment) A similar solution was merged to master for a similar problem with TextInput inside FlatList react#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 react@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 react#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:

constMyClass=({data})=>{constrenderItem=useCallback((item: key)=>{return(<View><Textselectable>{key}</Text><Textselectable>{data[key]}</Text></View>)},[data])return<FlatListdata={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.

Code-Victor · 2024-09-19T17:13:05Z

Please, this issue isn't fixed yet.
I just spent over an hour trying to fix this issue, thank God I found this.
#26264

LA-Johan · 2024-10-12T17:43:25Z

Reopened the issue here: #46999

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

Comment threadReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java Outdated
Comment threadReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java

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 react#28952 (comment) A similar solution was merged to master for a similar problem with TextInput inside FlatList react#28852

add switch options to FlatListExample
7f5dad9

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

Reapply fix introduced with commitreact@89340f1
f159764
The fix was reverted due to a regression with commit react@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 c360b1dSep 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

LA-Johan mentioned this pull request Oct 12, 2024
Text in FlatList is not selectable on Android #46999
Open

Uh oh!

Conversation

fabOnReact commented May 22, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changelog

Test Plan

Uh oh!

analysis-bot commented May 22, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

analysis-bot commented May 22, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

analysis-bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

facebook-github-bot commented Jul 29, 2021

Uh oh!

ShikaSD commented Aug 2, 2021

Uh oh!

fabOnReact commented Aug 4, 2021• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

facebook-github-bot commented Aug 17, 2021

Uh oh!

facebook-github-bot commented Sep 1, 2021

Uh oh!

Zmwang622 commented Aug 28, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabOnReact commented Aug 28, 2022

Uh oh!

Zmwang622 commented Aug 29, 2022

Uh oh!

markedwards commented Sep 11, 2023

Uh oh!

Code-Victor commented Sep 19, 2024

Uh oh!

LA-Johan commented Oct 12, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

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