From 0d2ca9ce29d69b10a243cec3cd7fc081754e890b Mon Sep 17 00:00:00 2001
From: Harry Yu <hy.harry.yu@gmail.com>
Date: Thu, 7 May 2020 15:57:31 -0700
Subject: [PATCH] Fixed TextInput not being selectable in removeClippedSubviews
 FlatLists

---
 RNTester/js/components/ListExampleShared.js       | 15 +++++++++++++++
 RNTester/js/examples/FlatList/FlatListExample.js  |  7 ++++++-
 .../js/examples/SectionList/SectionListExample.js |  6 ++++++
 .../react/views/textinput/ReactEditText.java      |  4 ++++
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/RNTester/js/components/ListExampleShared.js b/RNTester/js/components/ListExampleShared.js
index 522d72e3d93318..c98a3c2154b9ac 100644
--- a/RNTester/js/components/ListExampleShared.js
+++ b/RNTester/js/components/ListExampleShared.js
@@ -123,6 +123,12 @@ class HeaderComponent extends React.PureComponent<{...}> {
         <View style={styles.headerFooter}>
           <Text>LIST HEADER</Text>
         </View>
+        <View style={styles.headerInputContainer}>
+          <TextInput
+            defaultValue="Use this input to test text selection"
+            style={styles.headerInput}
+          />
+        </View>
         <SeparatorComponent />
       </View>
     );
@@ -281,6 +287,15 @@ const styles = StyleSheet.create({
   headerFooterContainer: {
     backgroundColor: 'rgb(239, 239, 244)',
   },
+  headerInputContainer: {
+    backgroundColor: 'white',
+    margin: 5,
+    borderWidth: 1,
+    borderColor: '#cccccc',
+  },
+  headerInput: {
+    padding: 2,
+  },
   listEmpty: {
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/RNTester/js/examples/FlatList/FlatListExample.js b/RNTester/js/examples/FlatList/FlatListExample.js
index ce2650f66a3f62..414a87c8772af0 100644
--- a/RNTester/js/examples/FlatList/FlatListExample.js
+++ b/RNTester/js/examples/FlatList/FlatListExample.js
@@ -56,6 +56,7 @@ type State = {|
   fixedHeight: boolean,
   logViewable: boolean,
   virtualized: boolean,
+  removeClippedSubviews: boolean,
   empty: boolean,
   useFlatListItemComponent: boolean,
   fadingEdgeLength: number,
@@ -71,6 +72,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
     fixedHeight: true,
     logViewable: false,
     virtualized: true,
+    removeClippedSubviews: false,
     empty: false,
     useFlatListItemComponent: false,
     fadingEdgeLength: 0,
@@ -131,6 +133,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
               {renderSmallSwitchOption(this, 'empty')}
               {renderSmallSwitchOption(this, 'debug')}
               {renderSmallSwitchOption(this, 'useFlatListItemComponent')}
+              {renderSmallSwitchOption(this, 'removeClippedSubviews')}
               {Platform.OS === 'android' && (
                 <View>
                   <TextInput
@@ -165,7 +168,8 @@ class FlatListExample extends React.PureComponent<Props, State> {
             inverted={this.state.inverted}
             key={
               (this.state.horizontal ? 'h' : 'v') +
-              (this.state.fixedHeight ? 'f' : 'd')
+              (this.state.fixedHeight ? 'f' : 'd') +
+              (this.state.removeClippedSubviews ? 'r' : 's')
             }
             keyboardShouldPersistTaps="always"
             keyboardDismissMode="on-drag"
@@ -180,6 +184,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
             refreshing={false}
             contentContainerStyle={styles.list}
             viewabilityConfig={VIEWABILITY_CONFIG}
+            removeClippedSubviews={this.state.removeClippedSubviews}
             {...flatListItemRendererProps}
           />
         </View>
diff --git a/RNTester/js/examples/SectionList/SectionListExample.js b/RNTester/js/examples/SectionList/SectionListExample.js
index 56d7067550c1ff..801a229bb889bd 100644
--- a/RNTester/js/examples/SectionList/SectionListExample.js
+++ b/RNTester/js/examples/SectionList/SectionListExample.js
@@ -77,6 +77,7 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
         inverted: boolean,
         logViewable: boolean,
         virtualized: boolean,
+        removeClippedSubviews: boolean,
       |} = {
     data: genItemData(1000),
     debug: false,
@@ -84,6 +85,7 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
     logViewable: false,
     virtualized: true,
     inverted: false,
+    removeClippedSubviews: false,
   };
 
   _scrollPos = new Animated.Value(0);
@@ -134,6 +136,7 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
             {renderSmallSwitchOption(this, 'logViewable')}
             {renderSmallSwitchOption(this, 'debug')}
             {renderSmallSwitchOption(this, 'inverted')}
+            {renderSmallSwitchOption(this, 'removeClippedSubviews')}
             <Spindicator value={this._scrollPos} />
           </View>
           <View style={styles.scrollToRow}>
@@ -211,6 +214,8 @@ class SectionListExample extends React.PureComponent<{...}, $FlowFixMeState> {
           ]}
           style={styles.list}
           viewabilityConfig={VIEWABILITY_CONFIG}
+          removeClippedSubviews={this.state.removeClippedSubviews}
+          key={this.state.removeClippedSubviews ? 'r' : 's'}
         />
       </RNTesterPage>
     );
@@ -292,6 +297,7 @@ const styles = StyleSheet.create({
 
 exports.title = '<SectionList>';
 exports.description = 'Performant, scrollable list of data.';
+exports.simpleExampleContainer = true;
 exports.examples = [
   {
     title: 'Simple scrollable list',
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
index 1638b75147d78f..79b3ed35348b97 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
@@ -724,6 +724,10 @@ public void onStartTemporaryDetach() {
   @Override
   public void onAttachedToWindow() {
     super.onAttachedToWindow();
+    // Used to ensure that text is selectable inside of removeClippedSubviews
+    // See https://github.com/facebook/react-native/issues/6805 for original
+    // fix that was ported to here.
+    super.setTextIsSelectable(true);
     if (mContainsImages) {
       Spanned text = getText();
       TextInlineImageSpan[] spans = text.getSpans(0, text.length(), TextInlineImageSpan.class);