[Fabric] Implement autoFocus property for TextInput for fabric (microsoft#14816)

* Added fix for AutoFocus

* Change files

---------

Co-authored-by: Harini Malothu <[email protected]>

Author: 2 people

change/react-native-windows-db520a88-144d-4212-8c94-89bf7aa0fbff.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Added fix for AutoFocus",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/playground/Samples/textinput.tsx

@@ -257,6 +257,20 @@ export default class Bootstrap extends React.Component<{}, any> {
               placeholder="Focus and then click outside"
               onEndEditing={this.handleEndEditing}
             />
+            <TextInput
+              style={[styles.input, {borderColor: 'green', borderWidth: 2}]}
+              placeholder={
+                'autoFocus: true - This input will be focused automatically'
+              }
+              autoFocus={true}
+            />
+            <TextInput
+              style={[styles.input, {borderColor: 'red', borderWidth: 2}]}
+              placeholder={
+                'autoFocus: false - This input will NOT be focused automatically'
+              }
+              autoFocus={false}
+            />
 
             <KeyboardAvoidingView
               style={styles.container}

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

@@ -1312,6 +1312,13 @@ void WindowsTextInputComponentView::onMounted() noexcept {
     m_propBits |= TXTBIT_CHARFORMATCHANGE;
   }
   InternalFinalize();
+
+  // Handle autoFocus property - focus the component when mounted if autoFocus is true
+  if (windowsTextInputProps().autoFocus) {
+    if (auto root = rootComponentView()) {
+      root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+    }
+  }
 }
 
 std::optional<std::string> WindowsTextInputComponentView::getAccessiblityValue() noexcept {