fix(fabric, textinput): enable spelling and grammer props

packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js

@@ -85,6 +85,15 @@ const RCTTextInputViewConfig = {
     topContentSizeChange: {
       registrationName: 'onContentSizeChange',
     },
+    topAutoCorrectChange: {
+      registrationName: 'onAutoCorrectChange',
+    },
+    topSpellCheckChange: {
+      registrationName: 'onSpellCheckChange',
+    },
+    topGrammarCheckChange: {
+      registrationName: 'onGrammarCheckChange',
+    },
   },
   validAttributes: {
     fontSize: true,

packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h

@@ -62,6 +62,9 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign, readonly) UIEdgeInsets contentInset;
 #if TARGET_OS_OSX // [macOS
 @property (nonatomic, assign) CGFloat pointScaleFactor;
+@property (nonatomic, getter=isAutomaticSpellingCorrectionEnabled) BOOL automaticSpellingCorrectionEnabled;
+@property (nonatomic, getter=isGrammarCheckingEnabled) BOOL grammarCheckingEnabled;
+@property (nonatomic, getter=isContinuousSpellCheckingEnabled) BOOL continuousSpellCheckingEnabled;
 #endif // macOS]
 
 // This protocol disallows direct access to `selectedTextRange` property because

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputViewManager.mm

@@ -67,9 +67,9 @@ @implementation RCTBaseTextInputViewManager {
 RCT_EXPORT_VIEW_PROPERTY(passwordRules, NSString)
 
 #if TARGET_OS_OSX // [macOS
-RCT_EXPORT_VIEW_PROPERTY(onAutoCorrectChange, RCTBubblingEventBlock);
-RCT_EXPORT_VIEW_PROPERTY(onSpellCheckChange, RCTBubblingEventBlock);
-RCT_EXPORT_VIEW_PROPERTY(onGrammarCheckChange, RCTBubblingEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onAutoCorrectChange, RCTDirectEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onSpellCheckChange, RCTDirectEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onGrammarCheckChange, RCTDirectEventBlock);
 
 RCT_EXPORT_VIEW_PROPERTY(onPaste, RCTDirectEventBlock)
 

packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm

@@ -168,13 +168,20 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     _backedTextInputView.autocapitalizationType =
         RCTUITextAutocapitalizationTypeFromAutocapitalizationType(newTextInputProps.traits.autocapitalizationType);
   }
+#endif // [macOS]
 
+#if !TARGET_OS_OSX // [macOS]
   if (newTextInputProps.traits.autoCorrect != oldTextInputProps.traits.autoCorrect) {
     _backedTextInputView.autocorrectionType =
         RCTUITextAutocorrectionTypeFromOptionalBool(newTextInputProps.traits.autoCorrect);
   }
-#endif // [macOS]
-
+#else // [macOS
+  if (newTextInputProps.traits.autoCorrect != oldTextInputProps.traits.autoCorrect && newTextInputProps.traits.autoCorrect.has_value()) {
+    _backedTextInputView.automaticSpellingCorrectionEnabled =
+        newTextInputProps.traits.autoCorrect.value();
+  }
+#endif // macOS]
+
   if (newTextInputProps.traits.contextMenuHidden != oldTextInputProps.traits.contextMenuHidden) {
     _backedTextInputView.contextMenuHidden = newTextInputProps.traits.contextMenuHidden;
   }
@@ -193,12 +200,26 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
     _backedTextInputView.keyboardAppearance =
         RCTUIKeyboardAppearanceFromKeyboardAppearance(newTextInputProps.traits.keyboardAppearance);
   }
-
+#endif // [macOS]
+
+#if !TARGET_OS_OSX // [macOS]
   if (newTextInputProps.traits.spellCheck != oldTextInputProps.traits.spellCheck) {
     _backedTextInputView.spellCheckingType =
         RCTUITextSpellCheckingTypeFromOptionalBool(newTextInputProps.traits.spellCheck);
   }
-#endif // [macOS]
+#else // [macOS
+  if (newTextInputProps.traits.spellCheck != oldTextInputProps.traits.spellCheck && newTextInputProps.traits.spellCheck.has_value()) {
+    _backedTextInputView.continuousSpellCheckingEnabled =
+        newTextInputProps.traits.spellCheck.value();
+  }
+#endif // macOS]
+
+#if TARGET_OS_OSX // [macOS
+  if (newTextInputProps.traits.grammarCheck != oldTextInputProps.traits.grammarCheck && newTextInputProps.traits.grammarCheck.has_value()) {
+    _backedTextInputView.grammarCheckingEnabled =
+        newTextInputProps.traits.grammarCheck.value();
+  }
+#endif // macOS]
 
   if (newTextInputProps.traits.caretHidden != oldTextInputProps.traits.caretHidden) {
     _backedTextInputView.caretHidden = newTextInputProps.traits.caretHidden;
@@ -463,14 +484,25 @@ - (void)textInputDidChangeSelection
 }
 
 #if TARGET_OS_OSX // [macOS
-- (void)automaticSpellingCorrectionDidChange:(BOOL)enabled {}
-
-
-- (void)continuousSpellCheckingDidChange:(BOOL)enabled {}
-
+- (void)automaticSpellingCorrectionDidChange:(BOOL)enabled {
+  if (_eventEmitter) {
+    std::static_pointer_cast<TextInputEventEmitter const>(_eventEmitter)->onAutoCorrectChange({.autoCorrectEnabled = static_cast<bool>(enabled)});
+  }
+}
 
-- (void)grammarCheckingDidChange:(BOOL)enabled {}
+- (void)continuousSpellCheckingDidChange:(BOOL)enabled
+{
+  if (_eventEmitter) {
+    std::static_pointer_cast<TextInputEventEmitter const>(_eventEmitter)->onSpellCheckChange({.spellCheckEnabled = static_cast<bool>(enabled)});
+  }
+}
 
+- (void)grammarCheckingDidChange:(BOOL)enabled 
+{
+  if (_eventEmitter) {
+    std::static_pointer_cast<TextInputEventEmitter const>(_eventEmitter)->onGrammarCheckChange({.grammarCheckEnabled = static_cast<bool>(enabled)});
+  }
+}
 
 - (BOOL)hasValidKeyDownOrValidKeyUp:(nonnull NSString *)key {
   return YES;

packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputUtils.h

@@ -35,7 +35,9 @@ UITextAutocapitalizationType RCTUITextAutocapitalizationTypeFromAutocapitalizati
 
 UIKeyboardAppearance RCTUIKeyboardAppearanceFromKeyboardAppearance(
     facebook::react::KeyboardAppearance keyboardAppearance);
+#endif // [macOS]
 
+#if !TARGET_OS_OSX // [macOS]
 UITextSpellCheckingType RCTUITextSpellCheckingTypeFromOptionalBool(std::optional<bool> spellCheck);
 
 UITextFieldViewMode RCTUITextFieldViewModeFromTextInputAccessoryVisibilityMode(

packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputUtils.mm

@@ -98,7 +98,9 @@ UIKeyboardAppearance RCTUIKeyboardAppearanceFromKeyboardAppearance(KeyboardAppea
       return UIKeyboardAppearanceDark;
   }
 }
+#endif // [macOS]
 
+#if !TARGET_OS_OSX // [macOS]
 UITextSpellCheckingType RCTUITextSpellCheckingTypeFromOptionalBool(std::optional<bool> spellCheck)
 {
   return spellCheck.has_value() ? (*spellCheck ? UITextSpellCheckingTypeYes : UITextSpellCheckingTypeNo)

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/ios/react/renderer/components/iostextinput/TextInputEventEmitter.cpp

@@ -172,6 +172,35 @@ void TextInputEventEmitter::onScroll(const Metrics& textInputMetrics) const {
   });
 }
 
+#if TARGET_OS_OSX // [macOS
+void TextInputEventEmitter::onAutoCorrectChange(
+    const Metrics& textInputMetrics) const {
+  dispatchEvent("autoCorrectChange", [textInputMetrics](jsi::Runtime& runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "enabled", textInputMetrics.autoCorrectEnabled);
+    return payload;
+  });
+}
+
+void TextInputEventEmitter::onSpellCheckChange(
+    const Metrics& textInputMetrics) const {
+  dispatchEvent("spellCheckChange", [textInputMetrics](jsi::Runtime& runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "enabled", textInputMetrics.spellCheckEnabled);
+    return payload;
+  });
+}
+
+void TextInputEventEmitter::onGrammarCheckChange(
+    const Metrics& textInputMetrics) const {
+  dispatchEvent("grammarCheckChange", [textInputMetrics](jsi::Runtime& runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "enabled", textInputMetrics.grammarCheckEnabled);
+    return payload;
+  });
+}
+#endif // macOS]
+
 void TextInputEventEmitter::dispatchTextInputEvent(
     const std::string& name,
     const Metrics& textInputMetrics) const {

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/ios/react/renderer/components/iostextinput/TextInputEventEmitter.h

@@ -27,6 +27,11 @@ class TextInputEventEmitter : public ViewEventEmitter {
     int eventCount;
     Size layoutMeasurement;
     Float zoomScale;
+ #if TARGET_OS_OSX // [macOS
+    bool autoCorrectEnabled;
+    bool spellCheckEnabled;
+    bool grammarCheckEnabled;
+#endif // macOS]   
   };
 
   struct KeyPressMetrics {
@@ -43,6 +48,11 @@ class TextInputEventEmitter : public ViewEventEmitter {
   void onSubmitEditing(const Metrics& textInputMetrics) const;
   void onKeyPress(const KeyPressMetrics& keyPressMetrics) const;
   void onScroll(const Metrics& textInputMetrics) const;
+ #if TARGET_OS_OSX // [macOS
+  void onAutoCorrectChange(const Metrics& textInputMetrics) const;
+  void onSpellCheckChange(const Metrics& textInputMetrics) const;
+  void onGrammarCheckChange(const Metrics& textInputMetrics) const;
+ #endif // macOS]
 
  private:
   void dispatchTextInputEvent(

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/ios/react/renderer/components/iostextinput/primitives.h

@@ -231,6 +231,15 @@ class TextInputTraits final {
    * Default value: `empty` (`null`).
    */
   std::optional<bool> smartInsertDelete{};
+
+#ifdef TARGET_OS_OSX // [macOS
+  /*
+   * Can be empty (`null` in JavaScript) which means `default`.
+   * maOS
+   * Default value: `empty` (`null`).
+   */
+  std::optional<bool> grammarCheck{};
+#endif // macOS]
 };
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/ios/react/renderer/components/iostextinput/propsConversions.h

@@ -148,6 +148,15 @@ static TextInputTraits convertRawProp(
       sourceTraits.smartInsertDelete,
       defaultTraits.smartInsertDelete);
 
+#ifdef TARGET_OS_OSX // [macOS
+  traits.grammarCheck = convertRawProp(
+      context,
+      rawProps,
+      "grammarCheck",
+      sourceTraits.grammarCheck,
+      defaultTraits.grammarCheck);
+#endif // macOS]
+
   return traits;
 }