From 5ed486cc8fb4aeef12c92a04619cc668427eee75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= <info@mateoguzman.net>
Date: Wed, 23 Apr 2025 02:21:52 -0700
Subject: [PATCH] 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
---
 .../com/facebook/react/views/text/ReactTextView.java  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java
index b8150596cc0..b72e987d439 100644
--- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java
+++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java
@@ -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);