mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Text: fix selectable prop not working correctly on initial render (#50822)
Summary: Fixes https://github.com/facebook/react-native/issues/50010 On the initial render of a Text with the `selectable` prop set as `true`, the Text view is not making itself selectable. I debugged this quite a lot, and by changing the state from false to true using `setState` on the JS side, I made it work. It turns out that we are setting this property in `onAttachedToWindow`, but somehow if `super.setTextIsSelectable` was already set as `true`, it won't re-apply it and we have to reset it to false before setting it again to true. This PR adds this reset. I couldn't understand yet why this is not breaking in Fabric. ## Changelog: [ANDROID] [FIXED] - Fix `selectable` prop not working correctly on initial render (old-arch) Pull Request resolved: https://github.com/facebook/react-native/pull/50822 Test Plan: - Test in both Fabric and Paper architectures to ensure there won't be a regression with this change in Fabric, as the issue occurs only in Paper. - To test this, I created a small example in the RN-Tester playground to toggle the selectable property on/off. Notice in the first video that initially the prop is set as true, but it won't allow selecting. If you toggle to false and then back to true again, it works. With the provider fix it should also allow selecting the text on initial render. Use this code snippet: ```tsx function Playground() { const [selectable, setSelectable] = React.useState(true); return ( <View style={styles.container}> <Text selectable={selectable} selectionColor="blue"> TESTING: is selectable? {selectable ? 'true' : 'false'} </Text> <Button title="Press me" onPress={() => setSelectable(!selectable)} /> </View> ); } ``` Videos: <details> <summary>Before</summary> https://github.com/user-attachments/assets/6a24dd0d-7f45-4a38-b18d-5142801ea1c3 </details> <details> <summary>After</summary> https://github.com/user-attachments/assets/ce5f9e6e-9a4c-44d7-9d97-f607f2fdc1b4 </details> Reviewed By: cortinico Differential Revision: D73421487 Pulled By: rshest fbshipit-source-id: c0b9d76076ef2e05930996953015fb58ad2a3d5f
This commit is contained in:
committed by
Facebook GitHub Bot
parent
45160b64af
commit
5ed486cc8f
+10
-1
@@ -542,7 +542,16 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
|
||||
@Override
|
||||
public void onAttachedToWindow() {
|
||||
super.onAttachedToWindow();
|
||||
setTextIsSelectable(mTextIsSelectable);
|
||||
|
||||
// This is a workaround to ensure the text becomes selectable as it doesn't work if we call
|
||||
// `setTextIsSelectable(true)` directly when setTextIsSelectable was already true.
|
||||
if (mTextIsSelectable) {
|
||||
setTextIsSelectable(false);
|
||||
setTextIsSelectable(true);
|
||||
} else {
|
||||
setTextIsSelectable(false);
|
||||
}
|
||||
|
||||
if (mContainsImages && getText() instanceof Spanned) {
|
||||
Spanned text = (Spanned) getText();
|
||||
TextInlineImageSpan[] spans = text.getSpans(0, text.length(), TextInlineImageSpan.class);
|
||||
|
||||
Reference in New Issue
Block a user