[Fabric] Implement keyboardDismissMode in ScrollView

change/react-native-windows-db1313ae-f47e-4abe-b703-d3788d1c2c1f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Implement keyboardDismissMode in ScrollView",
+  "packageName": "react-native-windows",
+  "email": "54227869+anupriya13@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/playground/Samples/scrollViewSnapSample.tsx

@@ -14,6 +14,7 @@ import {
   ScrollView,
   TouchableOpacity,
   RefreshControl,
+  TextInput,
 } from 'react-native';
 
 function wait(timeout: number) {
@@ -247,23 +248,6 @@ export default class Bootstrap extends React.Component<{}, any> {
               value={this.state.pagingEnabled}
             />
           </View>
-          <View
-            style={{
-              flexDirection: 'column',
-              alignSelf: 'stretch',
-              justifyContent: 'center',
-              padding: 20,
-            }}>
-            <Text>
-              {'KeyboardDismiss: '.concat(
-                this.state.keyboardDismiss ? 'on-drag' : 'none',
-              )}
-            </Text>
-            <Switch
-              onValueChange={this.toggleSwitch8}
-              value={this.state.keyboardDismiss}
-            />
-          </View>
         </View>
         <View style={{flex: 0.8, alignSelf: 'center', flexDirection: 'column'}}>
           <ScrollView
@@ -312,6 +296,45 @@ export default class Bootstrap extends React.Component<{}, any> {
             {this.makeItems(20, [styles.itemWrapper])}
           </ScrollView>
         </View>
+        <View
+          style={{
+            flexDirection: 'column',
+            alignSelf: 'stretch',
+            justifyContent: 'center',
+            padding: 20,
+          }}>
+          <Text>
+            {'KeyboardDismiss: '.concat(
+              this.state.keyboardDismiss ? 'on-drag' : 'none',
+            )}
+          </Text>
+          <Switch
+            onValueChange={this.toggleSwitch8}
+            value={this.state.keyboardDismiss}
+          />
+        </View>
+        <View style={{height: 200}}>
+          <ScrollView
+            style={{borderWidth: 2, borderColor: 'green'}}
+            keyboardDismissMode={
+              this.state.keyboardDismiss ? 'on-drag' : 'none'
+            }
+            contentContainerStyle={{padding: 20}}>
+            <TextInput
+              style={{
+                borderWidth: 1,
+                marginBottom: 20,
+                padding: 8,
+                height: 40,
+              }}
+              placeholder="Touch here for keyboard"
+            />
+            <Text>Scroll to test keyboard dismiss behavior.</Text>
+            <View style={{height: 100, marginTop: 20}}>
+              <Text>Scroll down to see more empty content.</Text>
+            </View>
+          </ScrollView>
+        </View>
       </View>
     );
 

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

@@ -15,6 +15,7 @@
 #pragma warning(pop)
 
 #include <windows.ui.composition.interop.h>
+#include <winrt/Windows.UI.ViewManagement.Core.h>
 
 #include <AutoDraw.h>
 #include <Fabric/DWriteHelpers.h>
@@ -1276,6 +1277,16 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp
         auto now = std::chrono::steady_clock::now();
         auto elapsed = std::chrono::duration_cast<std::chrono::duration<double>>(now - m_lastScrollEventTime).count();
 
+        // Dismiss keyboard if mode is "on-drag"
+        auto keyboardDismissMode =
+            std::static_pointer_cast<const facebook::react::ScrollViewProps>(viewProps())->keyboardDismissMode;
+        if (keyboardDismissMode == facebook::react::ScrollViewKeyboardDismissMode::OnDrag) {
+          auto coreInputView = winrt::Windows::UI::ViewManagement::Core::CoreInputView::GetForCurrentView();
+          if (coreInputView) {
+            coreInputView.TryHide();
+          }
+        }
+
         if (m_allowNextScrollNoMatterWhat ||
             (m_scrollEventThrottle < std::max(std::chrono::duration<double>(0.017).count(), elapsed))) {
           updateStateWithContentOffset();