[Fabric] Implementation of scrollEvent Handling and scrollEnabled,OnScroll prop for TextInput (#14946)

* [Fabric] Implementation of scrollEvent Handling and OnScroll prop for TextInput

* Yarn Change

* Removed the unwanted change

* Review Changes

* Changed Change file

* Added another check to trigger scrollEvent

* Lint Fixes

* Review Changes

* Removed event emission for keyup and keydown added tests

* Update snapshot

Author: vineethkuttan

change/react-native-windows-b24bafa9-f8e5-4f4b-801d-86e84ba9a69c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Implementation of scrollEvent Handling and scrollEnabled,OnScroll prop for TextInput",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -486,6 +486,13 @@ const examples: Array<RNTesterModuleExample> = [
           <ExampleTextInput
             autoCorrect={true}
             multiline={true}
+            onScroll={event => {
+              console.log(
+                `onScroll event: ${JSON.stringify(
+                  event.nativeEvent.contentOffset,
+                )}`,
+              );
+            }}
             style={[
               styles.multiline,
               {color: 'blue'},

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

@@ -80443,6 +80443,7 @@ exports[`snapshotAllPages TextInput 32`] = `
   <TextInput
     autoCorrect={true}
     multiline={true}
+    onScroll={[Function]}
     style={
       [
         {

packages/playground/Samples/textinput.tsx

@@ -302,6 +302,22 @@ export default class Bootstrap extends React.Component<{}, any> {
               }
               autoFocus={false}
             />
+            <TextInput
+              style={[
+                styles.input,
+                {height: 50, borderColor: '#bd1cddff', borderWidth: 2},
+              ]}
+              multiline={true}
+              placeholder="onScroll..."
+              scrollEnabled={true}
+              onScroll={event => {
+                Alert.alert(
+                  `onScroll event: ${JSON.stringify(
+                    event.nativeEvent.contentOffset,
+                  )}`,
+                );
+              }}
+            />
 
             <KeyboardAvoidingView
               style={styles.container}

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

@@ -811,6 +811,29 @@ void WindowsTextInputComponentView::OnPointerMoved(
       DVASPECT_CONTENT, -1, nullptr, nullptr, nullptr, nullptr, nullptr, ptContainer.x, ptContainer.y);
 }
 
+void WindowsTextInputComponentView::OnPointerWheelChanged(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (windowsTextInputProps().scrollEnabled && windowsTextInputProps().multiline) {
+    auto pointerPointProperties = args.GetCurrentPoint(-1).Properties();
+
+    auto delta = static_cast<float>(pointerPointProperties.MouseWheelDelta());
+
+    if (m_textServices && !pointerPointProperties.IsHorizontalMouseWheel()) {
+      // Vertical scrolling
+      if (delta > 0) {
+        m_textServices->TxSendMessage(WM_VSCROLL, SB_LINEUP, 0, nullptr);
+      } else {
+        m_textServices->TxSendMessage(WM_VSCROLL, SB_LINEDOWN, 0, nullptr);
+      }
+      args.Handled(true);
+    }
+    // Emit the onScroll event
+    EmitOnScrollEvent();
+
+    // We don't support horizontal scrolling yet cause it is not implemented in Android/IOS
+  }
+  Super::OnPointerWheelChanged(args);
+}
 void WindowsTextInputComponentView::OnKeyDown(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
   // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
@@ -836,7 +859,6 @@ void WindowsTextInputComponentView::OnKeyDown(
       args.Handled(true);
     }
   }
-
   Super::OnKeyDown(args);
 }
 
@@ -866,7 +888,6 @@ void WindowsTextInputComponentView::OnKeyUp(
       args.Handled(true);
     }
   }
-
   Super::OnKeyUp(args);
 }
 
@@ -1327,6 +1348,22 @@ void WindowsTextInputComponentView::OnTextUpdated() noexcept {
   }
 }
 
+void WindowsTextInputComponentView::EmitOnScrollEvent() noexcept {
+  if (!windowsTextInputProps().scrollEnabled || !m_eventEmitter || m_comingFromJS || !m_textServices) {
+    return;
+  }
+  LONG hMin, hMax, hPos, hPage;
+  LONG vMin, vMax, vPos, vPage;
+  BOOL hEnabled, vEnabled;
+  winrt::check_hresult(m_textServices->TxGetHScroll(&hMin, &hMax, &hPos, &hPage, &hEnabled));
+  winrt::check_hresult(m_textServices->TxGetVScroll(&vMin, &vMax, &vPos, &vPage, &vEnabled));
+  facebook::react::Point offset;
+  offset.x = static_cast<float>(hPos);
+  offset.y = static_cast<float>(vPos);
+  auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
+  emitter->onScroll(offset);
+}
+
 void WindowsTextInputComponentView::OnSelectionChanged(LONG start, LONG end) noexcept {
   if (m_eventEmitter && !m_comingFromState /* && !m_comingFromJS ?? */) {
     auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);

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

@@ -60,6 +60,8 @@ struct WindowsTextInputComponentView
       const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
   void OnPointerMoved(
       const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void OnPointerWheelChanged(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
 
   void OnKeyDown(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
   void OnKeyUp(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
@@ -97,6 +99,7 @@ struct WindowsTextInputComponentView
   void UpdateParaFormat() noexcept;
   void UpdateText(const std::string &str) noexcept;
   void OnTextUpdated() noexcept;
+  void EmitOnScrollEvent() noexcept;
   void OnSelectionChanged(LONG start, LONG end) noexcept;
   std::pair<float, float> GetContentSize() const noexcept;
   std::string GetTextFromRichEdit() const noexcept;

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

@@ -109,4 +109,17 @@ void WindowsTextInputEventEmitter::onPressOut(GestureResponderEvent event) const
   });
 }
 
+void WindowsTextInputEventEmitter::onScroll(facebook::react::Point offset) const {
+  dispatchEvent("textInputScroll", [offset = std::move(offset)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    {
+      auto contentOffsetObj = jsi::Object(runtime);
+      contentOffsetObj.setProperty(runtime, "x", offset.x);
+      contentOffsetObj.setProperty(runtime, "y", offset.y);
+      payload.setProperty(runtime, "contentOffset", contentOffsetObj);
+    }
+    return payload;
+  });
+}
+
 } // namespace facebook::react

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

@@ -55,6 +55,7 @@ class WindowsTextInputEventEmitter : public ViewEventEmitter {
   void onPressIn(GestureResponderEvent event) const override;
   void onEndEditing(OnEndEditing value) const;
   void onPressOut(GestureResponderEvent event) const override;
+  void onScroll(facebook::react::Point offset) const;
 };
 
 } // namespace facebook::react