[fix] Add support for caretHidden prop in TextInput

Close #2542 Fix #2541
necolas · Jun 26, 2023 · 1c376db · 1c376db
1 parent c350d82
commit 1c376db
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 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
@@ -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
@@ -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
@@ -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
@@ -25,6 +25,7 @@ export type TextInputProps = {
   autoCorrect?: ?boolean,
   autoFocus?: ?boolean,
   blurOnSubmit?: ?boolean,
+  caretHidden?: ?boolean,
   clearTextOnFocus?: ?boolean,
   defaultValue?: ?string,
   dir?: ?('auto' | 'ltr' | 'rtl'),