Fabric : Implements selectable prop for <Text>

change/react-native-windows-fdfd881c-5b04-4c05-ace6-fcca42dbd230.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implements selectable for <Text>",
+  "packageName": "react-native-windows",
+  "email": "74712637+iamAbhi-916@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/playground/Samples/text.tsx

@@ -20,6 +20,21 @@ export default class Bootstrap extends React.Component {
           selectable={true}>
           Click here : This is a text with a tooltip.
         </Text>
+
+        {/* Text Selection Test Section */}
+        <View style={styles.selectionTestContainer}>
+          <Text style={styles.sectionTitle}>Text Selection Test</Text>
+          <Text selectable={true} style={styles.selectableText}>
+            This text is SELECTABLE. Try clicking and dragging to select it.
+          </Text>
+          <Text selectable={false} style={styles.nonSelectableText}>
+            This text is NOT selectable (selectable=false).
+          </Text>
+          <Text style={styles.defaultText}>
+            This text has no selectable prop (default behavior).
+          </Text>
+        </View>
+
         <View
           style={styles.container2}
           accessible={true}
@@ -64,6 +79,38 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     margin: 10,
   },
+  selectionTestContainer: {
+    backgroundColor: '#f0f0f0',
+    padding: 15,
+    marginVertical: 10,
+    borderRadius: 8,
+    width: 400,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 10,
+    color: '#333',
+  },
+  selectableText: {
+    fontSize: 16,
+    color: '#007ACC',
+    marginBottom: 8,
+    padding: 8,
+    backgroundColor: '#e8f4fc',
+  },
+  nonSelectableText: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 8,
+    padding: 8,
+    backgroundColor: '#f5f5f5',
+  },
+  defaultText: {
+    fontSize: 16,
+    color: '#999',
+    padding: 8,
+  },
 });
 
 AppRegistry.registerComponent('Bootstrap', () => Bootstrap);

vnext/Desktop.DLL/React.Windows.Desktop.DLL.vcxproj

@@ -110,6 +110,7 @@
         windowscodecs.lib;
         WindowsApp_downlevel.lib;
         dxguid.lib;
+        icu.lib;
         %(AdditionalDependencies)
       </AdditionalDependencies>
       <AdditionalDependencies Condition="'$(Platform)' == 'ARM64EC'">

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

@@ -15,6 +15,7 @@
 #include <winrt/Windows.UI.Input.h>
 #include "Composition.Input.h"
 #include "CompositionViewComponentView.h"
+#include "ParagraphComponentView.h"
 #include "ReactNativeIsland.h"
 #include "RootComponentView.h"
 
@@ -1095,6 +1096,13 @@ void CompositionEventHandler::onPointerExited(
 void CompositionEventHandler::onPointerPressed(
     const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
     winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept {
+  namespace Composition = winrt::Microsoft::ReactNative::Composition;
+
+  // Clears any active text selection when left pointer is pressed
+  if (pointerPoint.Properties().PointerUpdateKind() != Composition::Input::PointerUpdateKind::RightButtonPressed) {
+    RootComponentView().ClearCurrentTextSelection();
+  }
+
   PointerId pointerId = pointerPoint.PointerId();
 
   auto staleTouch = std::find_if(m_activeTouches.begin(), m_activeTouches.end(), [pointerId](const auto &pair) {