Skip to content

Fabric : Implements selectable prop for <Text> #15473

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
iamAbhi-916 wants to merge 22 commits into
base: main
Choose a base branch
from
+669 −3
Open

Fabric : Implements selectable prop for <Text> #15473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
2e4a455
visual studio 2026 strict check fix
iamAbhi-916 Oct 28, 2025
ee5387f
Merge branch 'main' of https://github.com/iamAbhi-916/react-native-wi…
iamAbhi-916 Dec 10, 2025
084de27
Implement text selection with drag highlight for selectable prop
iamAbhi-916 Dec 11, 2025
49078d9
implemented copy to clipboard
iamAbhi-916 Dec 11, 2025
0c13ab8
CTRL + A to select all text
iamAbhi-916 Dec 11, 2025
1f1ea26
Double-click on a word in selectable text selects the word
iamAbhi-916 Dec 11, 2025
3f2d1da
right click on selected text provides context menu
iamAbhi-916 Dec 11, 2025
4866ff3
fixes unselect after CTRL + A selection
iamAbhi-916 Dec 11, 2025
1d02588
implements I-beam cursor for selectable text
iamAbhi-916 Dec 11, 2025
c53a3a0
default selection color cleanup
iamAbhi-916 Dec 11, 2025
96e82c1
yarn lint:fix and format
iamAbhi-916 Dec 11, 2025
a14ff7a
Change files
iamAbhi-916 Dec 11, 2025
7f8b7fc
Merge branch 'main' into text_selectable
iamAbhi-916 Dec 11, 2025
eb5b783
nit
iamAbhi-916 Dec 11, 2025
02697cf
Merge branch 'main' of https://github.com/iamAbhi-916/react-native-wi…
iamAbhi-916 Dec 11, 2025
8bc63c0
Merge branch 'text_selectable' of https://github.com/iamAbhi-916/reac…
iamAbhi-916 Dec 11, 2025
fcf0cbb
nit
iamAbhi-916 Dec 12, 2025
365d6ab
review comments ( double click , theme ( use of system api) , Capture…
iamAbhi-916 Dec 15, 2025
7d37868
removed weak_ref of ComponentView rather take ReactTaggedView
iamAbhi-916 Dec 15, 2025
78d3d17
Merge branch 'text_selectable' of https://github.com/iamAbhi-916/reac…
iamAbhi-916 Dec 15, 2025
2b04f1b
Merge branch 'main' into text_selectable
iamAbhi-916 Dec 15, 2025
709fa62
yarn format
iamAbhi-916 Dec 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-fdfd881c-5b04-4c05-ace6-fcca42dbd230.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Implements selectable for <Text>",
"packageName": "react-native-windows",
"email": "[email protected]",
"dependentChangeType": "patch"
}
47 changes: 47 additions & 0 deletions packages/playground/Samples/text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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);
8 changes: 8 additions & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down Expand Up @@ -1095,6 +1096,13 @@ void CompositionEventHandler::onPointerExited(
void CompositionEventHandler::onPointerPressed(
const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept {
// Clears any active text selection when left pointer is pressed
// Don't clear on right-click
if (pointerPoint.Properties().PointerUpdateKind() !=
winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::RightButtonPressed) {
winrt::Microsoft::ReactNative::Composition::implementation::ClearCurrentTextSelection();
Comment on lines +1101 to +1103
Copy link
Contributor

@sundaramramaswamy sundaramramaswamy Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please fix formatting. Hint: you can use namespace within a function too.

void fn() {
  namespace abcd = A::B::C::D;
  abcd::hello();
}

}

PointerId pointerId = pointerPoint.PointerId();

auto staleTouch = std::find_if(m_activeTouches.begin(), m_activeTouches.end(), [pointerId](const auto &pair) {
Expand Down
Loading
Loading