fix: text selection handling in RCTParagraphComponentView and add tests for selection behavior

Author: raajnadar

packages/react-native/React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentView.mm

@@ -20,6 +20,8 @@
 #import <react/renderer/textlayoutmanager/TextLayoutManager.h>
 #import <react/utils/ManagedObjectWrapper.h>
 
+#import <React/RCTSurfaceTouchHandler.h>
+
 #import "RCTConversions.h"
 #import "RCTFabricComponentsPlugins.h"
 
@@ -71,6 +73,7 @@ @interface RCTParagraphTextView : UIView
   [unpainted removeAttribute:NSUnderlineStyleAttributeName range:range];
   [unpainted removeAttribute:NSStrikethroughStyleAttributeName range:range];
   [unpainted removeAttribute:NSShadowAttributeName range:range];
+  [unpainted removeAttribute:RCTAttributedStringIsHighlightedAttributeName range:range];
   [unpainted endEditing];
 
   return unpainted;
@@ -85,7 +88,7 @@ @interface RCTParagraphTextView : UIView
  * construction rather than by coincidence. UIKit performs the selection; it
  * never performs the layout, and it never paints the text.
  */
-@interface RCTSelectableTextView : UITextView
+@interface RCTSelectableTextView : UITextView <UITextViewDelegate>
 
 /*
  * The paragraph as it is painted, before `RCTUnpaintedAttributedString` strips
@@ -100,6 +103,7 @@ @interface RCTSelectableTextView : UITextView
 
 @implementation RCTSelectableTextView {
   UITapGestureRecognizer *_dismissSelectionRecognizer;
+  BOOL _didCancelTouchesForSelection;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame textContainer:(NSTextContainer *)textContainer
@@ -121,10 +125,47 @@ - (instancetype)initWithFrame:(CGRect)frame textContainer:(NSTextContainer *)tex
     // `RCTParagraphComponentAccessibilityProvider`. Keeping the text view out of
     // the accessibility tree leaves that contract exactly as it was.
     self.accessibilityElementsHidden = YES;
+    self.delegate = self;
   }
   return self;
 }
 
+#pragma mark - Giving the touch to the selection
+
+/*
+ * The selection gesture and `RCTSurfaceTouchHandler` track the same touch, and
+ * neither cancels the other. `RCTSurfaceTouchHandler` resolves its event
+ * emitter when the finger lands, before any selection exists, so lifting the
+ * finger after a long press presses the <Text> under it. Selecting a link
+ * follows the link.
+ *
+ * Once a selection exists the touch belongs to the selection, so the other
+ * recognizer has to let go. Disabling a recognizer cancels what it tracks,
+ * which reaches React Native as a cancelled touch and stops the press.
+ */
+- (void)textViewDidChangeSelection:(UITextView *)textView
+{
+  BOOL hasSelection = textView.selectedRange.length > 0;
+  if (hasSelection && !_didCancelTouchesForSelection) {
+    _didCancelTouchesForSelection = YES;
+    [self _cancelSurfaceTouches];
+  } else if (!hasSelection) {
+    _didCancelTouchesForSelection = NO;
+  }
+}
+
+- (void)_cancelSurfaceTouches
+{
+  for (UIView *ancestor = self.superview; ancestor != nil; ancestor = ancestor.superview) {
+    for (UIGestureRecognizer *recognizer in ancestor.gestureRecognizers) {
+      if ([recognizer isKindOfClass:[RCTSurfaceTouchHandler class]] && recognizer.isEnabled) {
+        recognizer.enabled = NO;
+        recognizer.enabled = YES;
+      }
+    }
+  }
+}
+
 #pragma mark - Dismissing the selection
 
 /*
@@ -332,9 +373,6 @@ - (void)updateState:(const State::Shared &)state oldState:(const State::Shared &
 {
   _textView.state = std::static_pointer_cast<const ParagraphShadowNode::ConcreteState>(state);
   [_textView setNeedsDisplay];
-#if !TARGET_OS_TV
-  _selectionRenderedText = nil;
-#endif
   [self setNeedsLayout];
 
   // If the attributed string has changed, we need to notify the accessibility system that something changed,
@@ -511,6 +549,16 @@ - (UIAccessibilityTraits)accessibilityTraits
 
 - (SharedTouchEventEmitter)touchEventEmitterAtPoint:(CGPoint)point
 {
+#if !TARGET_OS_TV
+  // A drag of a selection handle starts on the glyphs the handle sits on, and
+  // that is often a pressable <Text>. Adjusting a selection must not press it.
+  // `resignFirstResponder` empties the range, so an empty range means no
+  // selection is on screen and an ordinary press goes through.
+  if (_selectableTextView.selectedRange.length > 0) {
+    return nullptr;
+  }
+#endif
+
   const auto &state = _textView.state;
   if (!state) {
     return _eventEmitter;
@@ -584,15 +632,19 @@ - (void)updateSelectableTextViewWithDrawingFrame:(CGRect)drawingFrame
     return;
   }
 
-  BOOL needsRebuild = _selectableTextView == nil ||
-      ![attributedText isEqualToAttributedString:_selectionRenderedText] ||
+  // The layout string decides the rebuild, and the painted string does not. A
+  // press on a nested pressable <Text> paints a highlight, which changes the
+  // painted string. A rebuild in the middle of that touch destroys the text
+  // view before its long press starts, so the paragraph never selects.
+  NSAttributedString *layoutText = RCTUnpaintedAttributedString(attributedText);
+
+  BOOL needsRebuild = _selectableTextView == nil || ![layoutText isEqualToAttributedString:_selectionRenderedText] ||
       !CGSizeEqualToSize(drawingFrame.size, _selectionRenderedSize);
 
   if (needsRebuild) {
-    NSTextStorage *textStorage =
-        [_selectionLayoutManager textStorageForNSAttributedString:RCTUnpaintedAttributedString(attributedText)
-                                              paragraphAttributes:_paragraphAttributes
-                                                             size:drawingFrame.size];
+    NSTextStorage *textStorage = [_selectionLayoutManager textStorageForNSAttributedString:layoutText
+                                                                       paragraphAttributes:_paragraphAttributes
+                                                                                      size:drawingFrame.size];
     NSTextContainer *textContainer = textStorage.layoutManagers.firstObject.textContainers.firstObject;
 
     [_selectableTextView removeFromSuperview];
@@ -607,7 +659,7 @@ - (void)updateSelectableTextViewWithDrawingFrame:(CGRect)drawingFrame
       [self addSubview:_selectableTextView];
     }
 
-    _selectionRenderedText = [attributedText copy];
+    _selectionRenderedText = [layoutText copy];
     _selectionRenderedSize = drawingFrame.size;
   }
 

packages/react-native/React/Tests/Text/RCTParagraphSelectionTests.mm

@@ -10,10 +10,14 @@
 
 #import <React/RCTParagraphComponentView.h>
 
+#import <React/RCTTouchableComponentViewProtocol.h>
 #import <react/renderer/components/text/ParagraphComponentDescriptor.h>
 #import <react/renderer/components/text/ParagraphProps.h>
 #import <react/renderer/components/text/ParagraphShadowNode.h>
 #import <react/renderer/components/text/ParagraphState.h>
+#import <react/renderer/components/text/TextShadowNode.h>
+#import <react/renderer/components/view/TouchEventEmitter.h>
+#import <react/renderer/core/EventDispatcher.h>
 #import <react/renderer/graphics/Color.h>
 #import <react/renderer/textlayoutmanager/TextLayoutManager.h>
 #import <react/utils/ContextContainer.h>
@@ -46,16 +50,73 @@ - (void)setUp
  * a strikethrough and a shadow.
  */
 - (AttributedString)decoratedAttributedString
+{
+  return [self decoratedAttributedStringHighlighted:NO];
+}
+
+- (AttributedString)decoratedAttributedStringHighlighted:(BOOL)highlighted
 {
   auto textAttributes = TextAttributes{};
   textAttributes.foregroundColor = colorFromRGBA(255, 0, 0, 255);
   textAttributes.fontSize = 20;
   textAttributes.textDecorationLineType = TextDecorationLineType::UnderlineStrikethrough;
   textAttributes.textDecorationStyle = TextDecorationStyle::Wavy;
+  if (highlighted) {
+    textAttributes.isHighlighted = true;
+  }
+
+  auto fragment = AttributedString::Fragment{};
+  fragment.string = "Selectable wavy decoration";
+  fragment.textAttributes = textAttributes;
+
+  auto attributedString = AttributedString{};
+  attributedString.appendFragment(std::move(fragment));
+  return attributedString;
+}
+
+/*
+ * A paragraph whose single fragment carries a touch emitter, which is how a
+ * nested pressable <Text> reaches `touchEventEmitterAtPoint:`.
+ */
+- (AttributedString)attributedStringWithEventEmitter:(std::shared_ptr<TouchEventEmitter>)eventEmitter
+{
+  auto textAttributes = TextAttributes{};
+  textAttributes.fontSize = 20;
 
   auto fragment = AttributedString::Fragment{};
   fragment.string = "Selectable wavy decoration";
   fragment.textAttributes = textAttributes;
+  fragment.parentShadowView.eventEmitter = eventEmitter;
+  // The emitter only reaches the attributed string when the fragment names a
+  // component, which is what marks it as a nested <Text> rather than raw text.
+  fragment.parentShadowView.componentHandle = TextShadowNode::Handle();
+
+  auto attributedString = AttributedString{};
+  attributedString.appendFragment(std::move(fragment));
+  return attributedString;
+}
+
+- (RCTParagraphComponentView *)paragraphViewWithEventEmitter:(std::shared_ptr<TouchEventEmitter>)eventEmitter
+{
+  RCTParagraphComponentView *view = [RCTParagraphComponentView new];
+  view.frame = CGRectMake(0, 0, 320, 100);
+
+  [view updateProps:[self propsWithSelectable:YES] oldProps:nullptr];
+  [view updateState:[self stateWithAttributedString:[self attributedStringWithEventEmitter:eventEmitter]] oldState:nil];
+
+  auto layoutMetrics = LayoutMetrics{};
+  layoutMetrics.frame = facebook::react::Rect{facebook::react::Point{0, 0}, facebook::react::Size{320, 100}};
+  [view updateLayoutMetrics:layoutMetrics oldLayoutMetrics:{}];
+
+  [view layoutIfNeeded];
+  return view;
+}
+
+- (AttributedString)attributedStringWithText:(std::string)text
+{
+  auto fragment = AttributedString::Fragment{};
+  fragment.string = std::move(text);
+  fragment.textAttributes = TextAttributes{};
 
   auto attributedString = AttributedString{};
   attributedString.appendFragment(std::move(fragment));
@@ -291,6 +352,85 @@ - (void)testRecyclingRemovesTheSelectionTextView
   XCTAssertNil([self selectionTextViewIn:view], @"A recycled paragraph must not keep a selection text view.");
 }
 
+#pragma mark - A press must not rebuild the selection
+
+/*
+ * Pressing a nested pressable <Text> paints a highlight, which changes the
+ * painted string but not the layout. Rebuilding the text view in the middle of
+ * that touch destroys the long press that UIKit has already started, and the
+ * paragraph never selects. Only a layout change may rebuild it.
+ */
+- (void)testHighlightOnlyUpdateKeepsTheSameSelectionTextView
+{
+  RCTParagraphComponentView *view = [self paragraphViewSelectable:YES];
+  UITextView *before = [self selectionTextViewIn:view];
+  XCTAssertNotNil(before);
+
+  [view updateState:[self stateWithAttributedString:[self decoratedAttributedStringHighlighted:YES]] oldState:nil];
+  [view layoutIfNeeded];
+
+  XCTAssertEqual(
+      [self selectionTextViewIn:view], before, @"A pressed highlight must not rebuild the selection text view.");
+}
+
+/*
+ * The cache must not go too far the other way: different text lays out
+ * differently, so it has to produce a new text view.
+ */
+- (void)testTextChangeRebuildsTheSelectionTextView
+{
+  RCTParagraphComponentView *view = [self paragraphViewSelectable:YES];
+  UITextView *before = [self selectionTextViewIn:view];
+  XCTAssertNotNil(before);
+
+  [view updateState:[self stateWithAttributedString:[self attributedStringWithText:"A different paragraph"]]
+           oldState:nil];
+  [view layoutIfNeeded];
+
+  XCTAssertNotEqual([self selectionTextViewIn:view], before, @"New text must rebuild the selection text view.");
+}
+
+#pragma mark - A showing selection owns the touch
+
+/*
+ * A drag of a selection handle starts on the glyphs the handle sits on, which
+ * is often a pressable <Text>. Delivering that touch presses the link, so
+ * adjusting a selection follows it. While a selection shows, the paragraph
+ * must hand out no event emitter at all.
+ */
+- (void)testShowingSelectionGivesNoEventEmitter
+{
+  auto eventEmitter = std::make_shared<TouchEventEmitter>(nullptr, EventDispatcher::Weak{});
+  RCTParagraphComponentView *view = [self paragraphViewWithEventEmitter:eventEmitter];
+  UITextView *selectionTextView = [self selectionTextViewIn:view];
+  XCTAssertNotNil(selectionTextView);
+
+  selectionTextView.selectedRange = NSMakeRange(0, 5);
+
+  XCTAssertTrue(
+      [(id<RCTTouchableComponentViewProtocol>)view touchEventEmitterAtPoint:CGPointMake(100, 10)] == nullptr,
+      @"A touch that lands while a selection shows must not press the text under it.");
+}
+
+/*
+ * The guard must not reach an ordinary tap. With nothing selected the pressable
+ * fragment still gets its press.
+ */
+- (void)testWithoutASelectionThePressStillGoesThrough
+{
+  auto eventEmitter = std::make_shared<TouchEventEmitter>(nullptr, EventDispatcher::Weak{});
+  RCTParagraphComponentView *view = [self paragraphViewWithEventEmitter:eventEmitter];
+  UITextView *selectionTextView = [self selectionTextViewIn:view];
+  XCTAssertNotNil(selectionTextView);
+
+  selectionTextView.selectedRange = NSMakeRange(0, 0);
+
+  XCTAssertEqual(
+      (const void *)[(id<RCTTouchableComponentViewProtocol>)view touchEventEmitterAtPoint:CGPointMake(100, 10)].get(),
+      (const void *)eventEmitter.get(),
+      @"With nothing selected, a press must still reach the pressable text.");
+}
+
 #pragma mark - Accessibility
 
 /*