Allow TextInput to scroll (#14448)

acoates-ms · web-flow · commit ebb1949033d5 · 2025-03-26T14:46:31.000-07:00
* Allow TextInput to scroll

* Change files

* update snapshot
diff --git a/change/react-native-windows-b86e11e6-8cbc-4602-b53a-e199ce0f6b2e.json b/change/react-native-windows-b86e11e6-8cbc-4602-b53a-e199ce0f6b2e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Allow TextInput to scroll",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap
@@ -3853,10 +3853,8 @@ exports[`TextInput Tests TextInputs can have customized line height 1`] = `
     "ControlType": 50004,
     "IsKeyboardFocusable": true,
     "LocalizedControlType": "edit",
-    "TextRangePattern.GetText": "Hel
-",
-    "ValuePattern.Value": "Hel
-",
+    "TextRangePattern.GetText": "Hel",
+    "ValuePattern.Value": "Hel",
   },
   "Component Tree": {
     "Type": "Microsoft.ReactNative.Composition.WindowsTextInputComponentView",
diff --git a/packages/playground/windows/playground-composition/Playground-Composition.cpp b/packages/playground/windows/playground-composition/Playground-Composition.cpp
@@ -161,44 +161,6 @@ struct WindowData {
     return m_instanceSettings;
   }
 
-  winrt::Microsoft::UI::WindowId
-  CreateChildWindow(winrt::Microsoft::UI::WindowId parentWindowId, LPCWSTR title, int x, int y, int w, int h) {
-    LPCWSTR childWindowClassName = L"TestChildWindowClass";
-
-    // Register child window class
-    static std::once_flag onceFlag;
-    std::call_once(onceFlag, [&childWindowClassName]() {
-      WNDCLASSEX childWindowClass = {};
-
-      childWindowClass.cbSize = sizeof(WNDCLASSEX);
-      childWindowClass.style = CS_HREDRAW | CS_VREDRAW;
-      childWindowClass.lpfnWndProc = ::DefWindowProc;
-      childWindowClass.hInstance = GetModuleHandle(nullptr);
-      childWindowClass.lpszClassName = childWindowClassName;
-
-      RegisterClassEx(&childWindowClass);
-    });
-
-    HWND parentHwnd;
-    parentHwnd = winrt::Microsoft::UI::GetWindowFromWindowId(parentWindowId);
-
-    HWND childHwnd = ::CreateWindowEx(
-        0 /* dwExStyle */,
-        childWindowClassName,
-        title,
-        WS_CHILD | WS_CLIPSIBLINGS | WS_VISIBLE,
-        x,
-        y,
-        w,
-        h,
-        parentHwnd /* hWndParent */,
-        nullptr /* hMenu */,
-        GetModuleHandle(nullptr),
-        nullptr /* lpParam */);
-
-    return winrt::Microsoft::UI::GetWindowIdFromWindow(childHwnd);
-  }
-
   void ApplyConstraintsForContentSizedWindow(winrt::Microsoft::ReactNative::LayoutConstraints &constraints) {
     constraints.MinimumSize = {300, 300};
     constraints.MaximumSize = {1000, 1000};
@@ -280,21 +242,28 @@ struct WindowData {
                 // Disable user sizing of the hwnd
                 ::SetWindowLong(hwnd, GWL_STYLE, GetWindowLong(hwnd, GWL_STYLE) & ~WS_SIZEBOX);
                 m_compRootView.SizeChanged(
-                    [hwnd](auto sender, const winrt::Microsoft::ReactNative::RootViewSizeChangedEventArgs &args) {
-                      RECT rcClient, rcWindow;
-                      GetClientRect(hwnd, &rcClient);
-                      GetWindowRect(hwnd, &rcWindow);
-
-                      SetWindowPos(
-                          hwnd,
-                          nullptr,
-                          0,
-                          0,
-                          static_cast<int>(args.Size().Width) + rcClient.left - rcClient.right + rcWindow.right -
-                              rcWindow.left,
-                          static_cast<int>(args.Size().Height) + rcClient.top - rcClient.bottom + rcWindow.bottom -
-                              rcWindow.top,
-                          SWP_DEFERERASE | SWP_NOACTIVATE | SWP_NOMOVE | SWP_NOOWNERZORDER | SWP_NOZORDER);
+                    [hwnd, props = InstanceSettings().Properties()](
+                        auto sender, const winrt::Microsoft::ReactNative::RootViewSizeChangedEventArgs &args) {
+                      auto compositor =
+                          winrt::Microsoft::ReactNative::Composition::CompositionUIService::GetCompositor(props);
+                      auto async = compositor.RequestCommitAsync();
+                      async.Completed([hwnd, size = args.Size()](
+                                          auto asyncInfo, winrt::Windows::Foundation::AsyncStatus /*asyncStatus*/) {
+                        RECT rcClient, rcWindow;
+                        GetClientRect(hwnd, &rcClient);
+                        GetWindowRect(hwnd, &rcWindow);
+
+                        SetWindowPos(
+                            hwnd,
+                            nullptr,
+                            0,
+                            0,
+                            static_cast<int>(size.Width) + rcClient.left - rcClient.right + rcWindow.right -
+                                rcWindow.left,
+                            static_cast<int>(size.Height) + rcClient.top - rcClient.bottom + rcWindow.bottom -
+                                rcWindow.top,
+                            SWP_DEFERERASE | SWP_NOACTIVATE | SWP_NOMOVE | SWP_NOOWNERZORDER | SWP_NOZORDER);
+                      });
                     });
               }
               m_compRootView.Arrange(constraints, {0, 0});
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp
@@ -116,25 +116,25 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Show the scroll bar
   BOOL TxShowScrollBar(INT fnBar, BOOL fShow) override {
-    assert(false);
+    // assert(false);
     return {};
   }
 
   //@cmember Enable the scroll bar
   BOOL TxEnableScrollBar(INT fuSBFlags, INT fuArrowflags) override {
-    assert(false);
+    // assert(false);
     return {};
   }
 
   //@cmember Set the scroll range
   BOOL TxSetScrollRange(INT fnBar, LONG nMinPos, INT nMaxPos, BOOL fRedraw) override {
-    assert(false);
+    // assert(false);
     return {};
   }
 
   //@cmember Set the scroll position
   BOOL TxSetScrollPos(INT fnBar, INT nPos, BOOL fRedraw) override {
-    assert(false);
+    // assert(false);
     return {};
   }
 
@@ -377,8 +377,11 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Get the bits representing requested scroll bars for the window
   HRESULT TxGetScrollBars(DWORD *pdwScrollBar) override {
-    // TODO support scrolling
-    *pdwScrollBar = 0;
+    if (m_outer->m_multiline) {
+      *pdwScrollBar = WS_VSCROLL | WS_HSCROLL | ES_AUTOVSCROLL | ES_AUTOHSCROLL;
+    } else {
+      *pdwScrollBar = WS_HSCROLL | ES_AUTOHSCROLL;
+    }
     return S_OK;
   }
 
@@ -1489,6 +1492,9 @@ WindowsTextInputComponentView::createVisual() noexcept {
   winrt::check_hresult(g_pfnCreateTextServices(nullptr, m_textHost.get(), spUnk.put()));
   spUnk.as(m_textServices);
 
+  LRESULT res;
+  winrt::check_hresult(m_textServices->TxSendMessage(EM_SETTEXTMODE, TM_PLAINTEXT, 0, &res));
+
   m_caretVisual = m_compContext.CreateCaretVisual();
   visual.InsertAt(m_caretVisual.InnerVisual(), 0);
   m_caretVisual.IsVisible(false);
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.cpp
@@ -5,6 +5,8 @@
 
 #include "WindowsTextInputEventEmitter.h"
 
+#include <react/renderer/core/graphicsConversions.h>
+
 namespace facebook::react {
 
 void WindowsTextInputEventEmitter::onChange(OnChange event) const {
@@ -46,4 +48,23 @@ void WindowsTextInputEventEmitter::onKeyPress(OnKeyPress event) const {
   });
 }
 
+static jsi::Value textInputMetricsContentSizePayload(
+    jsi::Runtime &runtime,
+    const WindowsTextInputEventEmitter::OnContentSizeChange &event) {
+  auto payload = jsi::Object(runtime);
+  {
+    auto contentSize = jsi::Object(runtime);
+    contentSize.setProperty(runtime, "width", event.contentSize.width);
+    contentSize.setProperty(runtime, "height", event.contentSize.height);
+    payload.setProperty(runtime, "contentSize", contentSize);
+  }
+  return payload;
+};
+
+void WindowsTextInputEventEmitter::onContentSizeChange(OnContentSizeChange event) const {
+  dispatchEvent("textInputContentSizeChange", [event = std::move(event)](jsi::Runtime &runtime) {
+    return textInputMetricsContentSizePayload(runtime, event);
+  });
+}
+
 } // namespace facebook::react
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.h b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.h
@@ -36,10 +36,16 @@ class WindowsTextInputEventEmitter : public ViewEventEmitter {
     std::string key;
   };
 
+  struct OnContentSizeChange {
+    int target;
+    facebook::react::Size contentSize;
+  };
+
   void onChange(OnChange value) const;
   void onSelectionChange(const OnSelectionChange &value) const;
   void onSubmitEditing(OnSubmitEditing value) const;
   void onKeyPress(OnKeyPress value) const;
+  void onContentSizeChange(OnContentSizeChange value) const;
 };
 
 } // namespace facebook::react
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp
@@ -25,11 +25,10 @@ Size WindowsTextInputShadowNode::measureContent(
     const LayoutContext &layoutContext,
     const LayoutConstraints &layoutConstraints) const {
   if (getStateData().cachedAttributedStringId != 0) {
+    facebook::react::ParagraphAttributes paragraphAttributes{};
+    paragraphAttributes.maximumNumberOfLines = getConcreteProps().multiline ? 0 : 1;
     return textLayoutManager_
-        ->measureCachedSpannableById(
-            getStateData().cachedAttributedStringId,
-            {}, // TODO getConcreteProps().paragraphAttributes
-            layoutConstraints)
+        ->measureCachedSpannableById(getStateData().cachedAttributedStringId, paragraphAttributes, layoutConstraints)
         .size;
   }
 
@@ -62,12 +61,11 @@ Size WindowsTextInputShadowNode::measureContent(
 
   TextLayoutContext textLayoutContext;
   textLayoutContext.pointScaleFactor = layoutContext.pointScaleFactor;
+
+  facebook::react::ParagraphAttributes paragraphAttributes{};
+  paragraphAttributes.maximumNumberOfLines = getConcreteProps().multiline ? 0 : 1;
   return textLayoutManager_
-      ->measure(
-          AttributedStringBox{attributedString},
-          {}, // TODO getConcreteProps().paragraphAttributes,
-          textLayoutContext,
-          layoutConstraints)
+      ->measure(AttributedStringBox{attributedString}, paragraphAttributes, textLayoutContext, layoutConstraints)
       .size;
 }
 
diff --git a/vnext/Microsoft.ReactNative/Modules/Animated/AnimationDriver.cpp b/vnext/Microsoft.ReactNative/Modules/Animated/AnimationDriver.cpp
@@ -50,7 +50,6 @@ void AnimationDriver::StartAnimation() {
     animatedValue->PropertySet().StartAnimation(ValueAnimatedNode::s_valueName, animation);
     animatedValue->AddActiveAnimation(m_id);
   }
-  scopedBatch.End();
 
   m_scopedBatchCompletedToken = scopedBatch.Completed(
       [weakSelf = weak_from_this(), weakManager = m_manager, id = m_id, tag = m_animatedValueTag](auto sender, auto) {
@@ -74,6 +73,8 @@ void AnimationDriver::StartAnimation() {
         }
       });
 
+  scopedBatch.End();
+
   m_animation = animation;
   m_scopedBatch = scopedBatch;
 }

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,6 @@ void AnimationDriver::StartAnimation() {`
`50`	`50`	`animatedValue->PropertySet().StartAnimation(ValueAnimatedNode::s_valueName, animation);`
`51`	`51`	`animatedValue->AddActiveAnimation(m_id);`
`52`	`52`	`}`
`53`		`- scopedBatch.End();`
`54`	`53`
`55`	`54`	`m_scopedBatchCompletedToken = scopedBatch.Completed(`
`56`	`55`	`[weakSelf = weak_from_this(), weakManager = m_manager, id = m_id, tag = m_animatedValueTag](auto sender, auto) {`
`@@ -74,6 +73,8 @@ void AnimationDriver::StartAnimation() {`
`74`	`73`	`}`
`75`	`74`	`});`
`76`	`75`
	`76`	`+ scopedBatch.End();`
	`77`	`+`
`77`	`78`	`m_animation = animation;`
`78`	`79`	`m_scopedBatch = scopedBatch;`
`79`	`80`	`}`