From 1c376dbb0c8f223370814c4b21fbf57d25ef79f2 Mon Sep 17 00:00:00 2001
From: Aswin S <mr.aswin@gmail.com>
Date: Thu, 22 Jun 2023 14:32:04 +0530
Subject: [PATCH] [fix] Add support for caretHidden prop in TextInput

Close #2542
Fix #2541
---
 .../react-native-web-examples/pages/text-input/index.js   | 5 +++++
 .../src/exports/TextInput/__tests__/index-test.js         | 8 ++++++++
 packages/react-native-web/src/exports/TextInput/index.js  | 7 ++++++-
 packages/react-native-web/src/exports/TextInput/types.js  | 1 +
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-web-examples/pages/text-input/index.js b/packages/react-native-web-examples/pages/text-input/index.js
index bf9c0696..256a01ca 100644
--- a/packages/react-native-web-examples/pages/text-input/index.js
+++ b/packages/react-native-web-examples/pages/text-input/index.js
@@ -75,6 +75,11 @@ export default function TextInputPage() {
           rows={3}
           style={styles.multiline}
         />
+        <TextInput
+          caretHidden
+          defaultValue="caretHidden"
+          style={styles.textinput}
+        />
       </View>
     </Example>
   );
diff --git a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
index 6651b739..56c2cd45 100644
--- a/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/TextInput/__tests__/index-test.js
@@ -105,6 +105,14 @@ describe('components/TextInput', () => {
     });
   });
 
+  describe('prop "caretHidden"', () => {
+    test('value "true"', () => {
+      const { container } = render(<TextInput caretHidden />);
+      const style = window.getComputedStyle(container.firstChild);
+      expect(style.caretColor).toEqual('transparent');
+    });
+  });
+
   describe('prop "clearTextOnFocus"', () => {
     const defaultValue = 'defaultValue';
 
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index a5795513..5cfd6bad 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/packages/react-native-web/src/exports/TextInput/index.js
@@ -99,6 +99,7 @@ const TextInput: React.AbstractComponent<
     autoCompleteType,
     autoCorrect = true,
     blurOnSubmit,
+    caretHidden,
     clearTextOnFocus,
     dir,
     editable,
@@ -402,7 +403,8 @@ const TextInput: React.AbstractComponent<
     { '--placeholderTextColor': placeholderTextColor },
     styles.textinput$raw,
     styles.placeholder,
-    props.style
+    props.style,
+    caretHidden && styles.caretHidden
   ];
   supportedProps.type = multiline ? undefined : type;
 
@@ -448,6 +450,9 @@ const styles = StyleSheet.create({
   },
   placeholder: {
     placeholderTextColor: 'var(--placeholderTextColor)'
+  },
+  caretHidden: {
+    caretColor: 'transparent'
   }
 });
 
diff --git a/packages/react-native-web/src/exports/TextInput/types.js b/packages/react-native-web/src/exports/TextInput/types.js
index a842a355..5e879d8d 100644
--- a/packages/react-native-web/src/exports/TextInput/types.js
+++ b/packages/react-native-web/src/exports/TextInput/types.js
@@ -25,6 +25,7 @@ export type TextInputProps = {
   autoCorrect?: ?boolean,
   autoFocus?: ?boolean,
   blurOnSubmit?: ?boolean,
+  caretHidden?: ?boolean,
   clearTextOnFocus?: ?boolean,
   defaultValue?: ?string,
   dir?: ?('auto' | 'ltr' | 'rtl'),