Implementation for onContentSizeChange property for TextInput for fabric

change/react-native-windows-ac5a5021-6294-47db-b9ef-14f49d38b108.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Implement the onContentSizeChange property for the fabric implementation of TextInput.",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/playground/Samples/textinput.tsx

@@ -41,6 +41,10 @@ export default class Bootstrap extends React.Component<{}, any> {
     console.log('keyboardDidHide');
   };
 
+  setHeightAndWidth = (height: number, width: number) => {
+    console.log(' onContentSizeChange height: ' + height + ' width: ' + width);
+  }
+
   componentWillUnmount() {
     this.didShowEmitterSubscription.remove();
     this.didHideEmitterSubscription.remove();
@@ -148,6 +152,13 @@ export default class Bootstrap extends React.Component<{}, any> {
             style={[styles.input, {letterSpacing: 5.1}]}
             placeholder={'Letter Spacing'}
           />
+          <TextInput
+            style={styles.input}
+            multiline
+            onContentSizeChange={(event) => this.setHeightAndWidth(event.nativeEvent.contentSize.height,
+                event.nativeEvent.contentSize.width)}
+            placeholder={'content size change'}
+          />
           <Button
             title={
               this.state.passwordHidden

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

@@ -1132,6 +1132,15 @@ void WindowsTextInputComponentView::updateLayoutMetrics(
 
   if (newWidth != m_imgWidth || newHeight != m_imgHeight) {
     m_drawingSurface = nullptr; // Invalidate surface if we get a size change
+
+    // call onContentSizeChange event for multiline TextInput
+    if (m_eventEmitter && !m_comingFromJS && m_multiline) {
+      auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
+      facebook::react::WindowsTextInputEventEmitter::OnContentSizeChange onContentSizeChangeArgs;
+      onContentSizeChangeArgs.contentSize.width = layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor;
+      onContentSizeChangeArgs.contentSize.height = layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor;
+      emitter->onContentSizeChange(onContentSizeChangeArgs);
+    }
   }
 
   m_imgWidth = newWidth;