From 12e91a35a421a001812b964bf7c2df19a4048c1c Mon Sep 17 00:00:00 2001
From: Richard Lindhout <richardlindhout96@gmail.com>
Date: Thu, 17 Sep 2020 23:08:05 +0200
Subject: [PATCH] [fix] nested Text selection

Allow text to be made selectable within a text node that is not selectable.

Close #1742
---
 .../__tests__/__snapshots__/index-test.js.snap     | 14 ++++++++++++++
 .../src/exports/Text/__tests__/index-test.js       | 12 +++++++++++-
 .../react-native-web/src/exports/Text/index.js     |  4 ++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
index 8cf24067..c5bb3af8 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
@@ -25,3 +25,17 @@ exports[`components/Text nested 1`] = `
   />
 </div>
 `;
+
+exports[`components/Text prop "selectable" value of false 1`] = `
+<div
+  class="css-text-901oao r-userSelect-lrvibr"
+  dir="auto"
+/>
+`;
+
+exports[`components/Text prop "selectable" value of true 1`] = `
+<div
+  class="css-text-901oao r-userSelect-1xnzce8"
+  dir="auto"
+/>
+`;
diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
index 4d7957d0..e95a0f80 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
@@ -21,5 +21,15 @@ describe('components/Text', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('prop "numberOfLines"', () => {});
+  describe('prop "selectable"', () => {
+    test('value of false', () => {
+      const { container } = render(<Text selectable={false} />);
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    test('value of true', () => {
+      const { container } = render(<Text selectable={true} />);
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
 });
diff --git a/packages/react-native-web/src/exports/Text/index.js b/packages/react-native-web/src/exports/Text/index.js
index d03c7aa3..cd8396e2 100644
--- a/packages/react-native-web/src/exports/Text/index.js
+++ b/packages/react-native-web/src/exports/Text/index.js
@@ -111,6 +111,7 @@ const Text = forwardRef<TextProps, *>((props, forwardedRef) => {
   const style = [
     props.style,
     numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines },
+    selectable === true && styles.selectable,
     selectable === false && styles.notSelectable,
     onPress && styles.pressable
   ];
@@ -207,6 +208,9 @@ const styles = StyleSheet.create({
   notSelectable: {
     userSelect: 'none'
   },
+  selectable: {
+    userSelect: 'text'
+  },
   pressable: {
     cursor: 'pointer'
   }