[Fabric] Add caretHidden to TextInput (#12430)

* add caretHidden to Fabric's TextInput

* Change files

* feedback

* feedback2

* add caretHidden to TextInput example page

* lint and snapshot

* update snapshot

* revert snapshot

* add componentTest

Author: TatianaKapos

change/react-native-windows-d7fe4f1c-4277-4c6f-bf59-4b12118c130c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add caretHidden to Fabric's TextInput",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js

@@ -724,6 +724,22 @@ const examples: Array<RNTesterModuleExample> = [
       return <SpellCheckSample />;
     },
   },
+  {
+    title: 'CaretHidden set to True',
+    render: function (): React.Node {
+      return (
+        <View>
+          <Text>CaretHidden</Text>
+          <TextInput
+            style={styles.singleLine}
+            caretHidden={true}
+            placeholder="caretHidden={true}"
+            testID="textinput-carethidden"
+          />
+        </View>
+      );
+    },
+  },
   // Windows]
 ];
 

packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts

@@ -641,4 +641,10 @@ describe('TextInput Tests', () => {
     const dump = await dumpVisualTree('textinput-padding');
     expect(dump).toMatchSnapshot();
   });
+  test('TextInputs can have caretHidden', async () => {
+    const component = await app.findElementByTestID('textinput-carethidden');
+    await component.waitForDisplayed({timeout: 5000});
+    const dump = await dumpVisualTree('textinput-carethidden');
+    expect(dump).toMatchSnapshot();
+  });
 });

packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap

@@ -3641,6 +3641,53 @@ exports[`TextInput Tests TextInputs can have attributed text 1`] = `
 }
 `;
 
+exports[`TextInput Tests TextInputs can have caretHidden 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "textinput-carethidden",
+    "ControlType": 50004,
+    "HelpText": "caretHidden={true}",
+    "IsEnabled": true,
+    "IsKeyboardFocusable": true,
+    "LocalizedControlType": "edit",
+    "Name": "caretHidden={true}",
+  },
+  "Visual Tree": {
+    "Children": [
+      {
+        "Brush": {
+          "Brush Type": "ColorBrush",
+          "Color": "rgba(0, 0, 0, 255)",
+        },
+        "Offset": [
+          0,
+          0,
+          0,
+        ],
+        "Opacity": 0,
+        "Size": [
+          0,
+          0,
+        ],
+        "Visual Type": "SpriteVisual",
+      },
+    ],
+    "Comment": "textinput-carethidden",
+    "Offset": [
+      0,
+      0,
+      0,
+    ],
+    "Opacity": 1,
+    "Size": [
+      916,
+      23,
+    ],
+    "Visual Type": "SpriteVisual",
+  },
+}
+`;
+
 exports[`TextInput Tests TextInputs can have custom return key label, Compile 1`] = `
 {
   "Automation Tree": {
@@ -6643,4 +6690,4 @@ exports[`TextInput Tests Uncontrolled TextInput 1`] = `
     "Visual Type": "SpriteVisual",
   },
 }
-`;
+`;

packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap

@@ -74799,6 +74799,24 @@ exports[`snapshotAllPages TextInput 36`] = `
 ]
 `;
 
+exports[`snapshotAllPages TextInput 37`] = `
+<View>
+  <Text>
+    CaretHidden
+  </Text>
+  <TextInput
+    caretHidden={true}
+    placeholder="caretHidden={true}"
+    style={
+      {
+        "fontSize": 16,
+      }
+    }
+    testID="textinput-carethidden"
+  />
+</View>
+`;
+
 exports[`snapshotAllPages TextInputs with key prop 1`] = `
 <View>
   <TextInput

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp

@@ -1094,7 +1094,7 @@ struct CompCaretVisual
   }
 
  private:
-  bool m_isVisible{false};
+  bool m_isVisible{true};
   typename TTypeRedirects::SpriteVisual m_compVisual;
   winrt::Microsoft::ReactNative::Composition::IVisual m_visual;
   typename TTypeRedirects::ScalarKeyFrameAnimation m_opacityAnimation;

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -161,7 +161,7 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Show the caret
   BOOL TxShowCaret(BOOL fShow) override {
-    m_outer->ShowCaret(fShow);
+    m_outer->ShowCaret(m_outer->m_props->caretHidden ? false : fShow);
     return true;
   }