[Fabric] Implement SpellCheck and AutoCorrect for TextInput (#14509)

Author: anupriya13

change/react-native-windows-99f88013-45df-4134-99df-b0fb86dc5e88.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement SpellCheck and AutoCorrect for TextInput",
+  "packageName": "react-native-windows",
+  "email": "54227869+anupriya13@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/src/js/examples-win/LegacyTests/TextInputTestPage.tsx

@@ -62,6 +62,8 @@ export class TextInputTestPage extends React.Component<
           style={{height: 80}}
           placeholder="MultiLine"
           multiline={true}
+          spellCheck={false}
+          autoCorrect={false}
         />
         <TextInput
           testID="auto-caps-textinput-field"

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

@@ -29370,8 +29370,10 @@ exports[`snapshotAllPages LegacyTextInputTest 1`] = `
     testID="textinput-field"
   />
   <TextInput
+    autoCorrect={false}
     multiline={true}
     placeholder="MultiLine"
+    spellCheck={false}
     style={
       {
         "height": 80,

packages/playground/Samples/textinput.tsx

@@ -82,8 +82,33 @@ export default class Bootstrap extends React.Component<{}, any> {
             />
             <TextInput
               style={styles.input}
-              placeholder={'SpellChecking Disabled'}
+              placeholder={'SpellChecking Enabled Autocorrect Disabled'}
+              spellCheck={true}
+              autoCorrect={false}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder={'SpellChecking Enabled Autocorrect Enabled'}
+              spellCheck={true}
+              autoCorrect={true}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder={'SpellChecking Disabled Autocorrect Disabled'}
+              spellCheck={false}
+              autoCorrect={false}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder={'SpellChecking Disabled Autocorrect Enabled'}
               spellCheck={false}
+              autoCorrect={true}
+            />
+            <TextInput
+              style={styles.input}
+              placeholder={
+                'SpellChecking default (true) Autocorrect default (true)'
+              }
             />
             <TextInput
               style={styles.input}

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

@@ -463,6 +463,13 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
   WindowsTextInputComponentView *m_outer;
 };
 
+int WINAPI
+AutoCorrectOffCallback(LANGID langid, const WCHAR *pszBefore, WCHAR *pszAfter, LONG cchAfter, LONG *pcchReplaced) {
+  wcsncpy_s(pszAfter, cchAfter, pszBefore, _TRUNCATE);
+  *pcchReplaced = static_cast<LONG>(wcslen(pszAfter));
+  return ATP_CHANGE;
+}
+
 facebook::react::AttributedString WindowsTextInputComponentView::getAttributedString() const {
   // Use BaseTextShadowNode to get attributed string from children
 
@@ -1067,6 +1074,20 @@ void WindowsTextInputComponentView::updateProps(
     m_propBits |= TXTBIT_PARAFORMATCHANGE;
   }
 
+  // Please note: spellcheck performs both red lines and autocorrect as per windows behaviour
+  bool shouldUpdateSpellCheck =
+      (!oldProps || (oldTextInputProps.spellCheck != newTextInputProps.spellCheck) ||
+       (oldTextInputProps.autoCorrect != newTextInputProps.autoCorrect));
+
+  if (shouldUpdateSpellCheck) {
+    bool effectiveSpellCheck = newTextInputProps.spellCheck || newTextInputProps.autoCorrect;
+    updateSpellCheck(effectiveSpellCheck);
+  }
+
+  if (!oldProps || oldTextInputProps.autoCorrect != newTextInputProps.autoCorrect) {
+    updateAutoCorrect(newTextInputProps.autoCorrect);
+  }
+
   UpdatePropertyBits();
 }
 
@@ -1591,4 +1612,23 @@ void WindowsTextInputComponentView::updateLetterSpacing(float letterSpacing) noe
       m_textServices->TxSendMessage(EM_SETCHARFORMAT, SCF_SELECTION, reinterpret_cast<LPARAM>(&cf), &res));
 }
 
+void WindowsTextInputComponentView::updateAutoCorrect(bool enable) noexcept {
+  LRESULT lresult;
+  winrt::check_hresult(m_textServices->TxSendMessage(
+      EM_SETAUTOCORRECTPROC, enable ? 0 : reinterpret_cast<WPARAM>(AutoCorrectOffCallback), 0, &lresult));
+}
+
+void WindowsTextInputComponentView::updateSpellCheck(bool enable) noexcept {
+  LRESULT currentLangOptions;
+  winrt::check_hresult(m_textServices->TxSendMessage(EM_GETLANGOPTIONS, 0, 0, &currentLangOptions));
+
+  DWORD newLangOptions = static_cast<DWORD>(currentLangOptions);
+  if (enable) {
+    newLangOptions |= IMF_SPELLCHECKING;
+  }
+
+  LRESULT lresult;
+  winrt::check_hresult(
+      m_textServices->TxSendMessage(EM_SETLANGOPTIONS, IMF_SPELLCHECKING, enable ? newLangOptions : 0, &lresult));
+}
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -111,6 +111,8 @@ struct WindowsTextInputComponentView
       const std::string &newcapitalizationType) noexcept;
 
   void updateLetterSpacing(float letterSpacing) noexcept;
+  void updateAutoCorrect(bool value) noexcept;
+  void updateSpellCheck(bool value) noexcept;
 
   winrt::Windows::UI::Composition::CompositionSurfaceBrush m_brush{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::ICaretVisual m_caretVisual{nullptr};

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

@@ -24,6 +24,7 @@ WindowsTextInputProps::WindowsTextInputProps(
           */
 
       allowFontScaling(convertRawProp(context, rawProps, "allowFontScaling", sourceProps.allowFontScaling, {true})),
+      autoCorrect(convertRawProp(context, rawProps, "autoCorrect", sourceProps.autoCorrect, {true})),
       clearTextOnFocus(convertRawProp(context, rawProps, "clearTextOnFocus", sourceProps.clearTextOnFocus, {false})),
       editable(convertRawProp(context, rawProps, "editable", sourceProps.editable, {true})),
       maxLength(convertRawProp(context, rawProps, "maxLength", sourceProps.maxLength, {0})),
@@ -36,7 +37,7 @@ WindowsTextInputProps::WindowsTextInputProps(
       selection(convertRawProp(context, rawProps, "selection", sourceProps.selection, {})),
       selectionColor(convertRawProp(context, rawProps, "selectionColor", sourceProps.selectionColor, {})),
       selectTextOnFocus(convertRawProp(context, rawProps, "selectTextOnFocus", sourceProps.selectTextOnFocus, {false})),
-      spellCheck(convertRawProp(context, rawProps, "spellCheck", sourceProps.spellCheck, {false})),
+      spellCheck(convertRawProp(context, rawProps, "spellCheck", sourceProps.spellCheck, {true})),
       text(convertRawProp(context, rawProps, "text", sourceProps.text, {})),
       mostRecentEventCount(
           convertRawProp(context, rawProps, "mostRecentEventCount", sourceProps.mostRecentEventCount, {0})),

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputProps.h

@@ -97,6 +97,7 @@ class WindowsTextInputProps final : public ViewProps, public BaseTextProps {
   setProp(const PropsParserContext &context, RawPropsPropNameHash hash, const char *propName, RawValue const &value);
 
   bool allowFontScaling{true};
+  bool autoCorrect{true};
   bool clearTextOnFocus{false};
   bool editable{true};
   int maxLength{0};
@@ -108,7 +109,7 @@ class WindowsTextInputProps final : public ViewProps, public BaseTextProps {
   CompWindowsTextInputSelectionStruct selection{};
   SharedColor selectionColor{};
   bool selectTextOnFocus{false};
-  bool spellCheck{false};
+  bool spellCheck{true};
   std::string text{};
   int mostRecentEventCount{0};
   bool secureTextEntry{false};