From 3f86d769c790a69c4a0732b1e2c6057e91655ce7 Mon Sep 17 00:00:00 2001
From: Eric Rozell <erozell@outlook.com>
Date: Wed, 19 May 2021 15:20:16 -0400
Subject: [PATCH 1/5] Allow pointer events on selectable Text

When TextBlock::IsTextSelectionEnabled is set to true, pointer events
are canceled because the events are always marked as handled by the
TextBlock, thus the events never reach the React Native root view. This
change subscribes a TouchEventHandler to Text when the `selectable` prop
is set to true, and also conditionally fires the `onTouchEnd` event when
PointerCaptureLost fires when text is *not* selected as a result of the
pointer events (e.g., click-and-drag or the second click of a double
click). This allows us to create `onPress` callbacks that mimic the
behavior of the XAML hyperlink component. In order for the correct
page layout dimensions to be reported, we also need to provide the root
view to TouchEventHandler.

Fixes #7812
---
 .../LegacyTests/SelectableTextTestPage.tsx    | 74 +++++++++++++++++
 .../src/js/utils/RNTesterList.windows.js      |  4 +
 .../test/LegacySelectableTextTest.test.ts     | 60 ++++++++++++++
 .../LegacySelectableTextTest.test.ts.snap     | 81 +++++++++++++++++++
 .../ReactPointerEventArgs.cpp                 |  6 ++
 .../ReactPointerEventArgs.h                   |  1 +
 .../ReactPointerEventArgs.idl                 | 11 ++-
 .../Views/TextViewManager.cpp                 | 52 ++++++++++++
 .../Views/TextViewManager.h                   |  2 +
 .../Views/TouchEventHandler.cpp               | 51 ++++++++----
 .../Views/TouchEventHandler.h                 | 15 ++--
 11 files changed, 332 insertions(+), 25 deletions(-)
 create mode 100644 packages/@react-native-windows/tester/src/js/examples-win/LegacyTests/SelectableTextTestPage.tsx
 create mode 100644 packages/e2e-test-app/test/LegacySelectableTextTest.test.ts
 create mode 100644 packages/e2e-test-app/test/__snapshots__/LegacySelectableTextTest.test.ts.snap

diff --git a/packages/@react-native-windows/tester/src/js/examples-win/LegacyTests/SelectableTextTestPage.tsx b/packages/@react-native-windows/tester/src/js/examples-win/LegacyTests/SelectableTextTestPage.tsx
new file mode 100644
index 00000000000..125ad20d1e3
--- /dev/null
+++ b/packages/@react-native-windows/tester/src/js/examples-win/LegacyTests/SelectableTextTestPage.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ */
+
+import React from 'react';
+import {Button, StyleSheet, Text, View} from 'react-native';
+
+interface IPressableTextState {
+  count: number;
+  isSelectable: boolean;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'flex-start',
+  },
+  pressable: {
+    color: 'blue',
+    textDecorationLine: 'underline',
+  },
+});
+
+export class SelectableTextTests extends React.Component<
+  {},
+  IPressableTextState
+> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      count: 0,
+      isSelectable: false,
+    };
+  }
+  public render() {
+    const increment = () => this.setState({count: this.state.count + 1});
+    return (
+      <View style={styles.container}>
+        <Text testID="pressed-state">Pressed: {this.state.count} times.</Text>
+        <Text testID="text-example" selectable={this.state.isSelectable}>
+          Text before{' '}
+          <Text onPress={increment} style={styles.pressable}>
+            click here
+          </Text>{' '}
+          text after
+        </Text>
+        <Button
+          testID="toggle-selectable-button"
+          title="Toggle Selectable"
+          onPress={() =>
+            this.setState({isSelectable: !this.state.isSelectable})
+          }
+        />
+        <Button
+          testID="clear-state-button"
+          title="Clear State"
+          onPress={() => this.setState({count: 0, isSelectable: false})}
+        />
+      </View>
+    );
+  }
+}
+
+export const displayName = (_undefined?: string) => {};
+export const title = 'LegacySelectableTextTest';
+export const description = 'Legacy e2e test for selectable Text hit testing';
+export const examples = [
+  {
+    render: function(): JSX.Element {
+      return <SelectableTextTests />;
+    },
+  },
+];
diff --git a/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js b/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
index cbf85a88208..99b4b656693 100644
--- a/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
+++ b/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
@@ -150,6 +150,10 @@ const Components: Array<RNTesterModuleInfo> = [
     key: 'LegacyImageTest',
     module: require('../examples-win/LegacyTests/ImageTestPage'),
   },
+  {
+    key: 'LegacySelectableTextTest',
+    module: require('../examples-win/LegacyTests/SelectableTextTestPage'),
+  },
 ];
 
 const APIs: Array<RNTesterModuleInfo> = [
diff --git a/packages/e2e-test-app/test/LegacySelectableTextTest.test.ts b/packages/e2e-test-app/test/LegacySelectableTextTest.test.ts
new file mode 100644
index 00000000000..f1c9c16e775
--- /dev/null
+++ b/packages/e2e-test-app/test/LegacySelectableTextTest.test.ts
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {app} from '@react-native-windows/automation';
+import {dumpVisualTree} from '@react-native-windows/automation-commands';
+import {goToComponentExample} from './RNTesterNavigation';
+
+beforeAll(async () => {
+  await goToComponentExample('LegacySelectableTextTest');
+});
+
+describe('LegacySelectableTextTest', () => {
+  beforeEach(async () => {
+    await clearState();
+  });
+
+  test('PressableWhenNotSelectable', async () => {
+    const textExample = await app.findElementByTestID('text-example');
+    await textExample.click();
+    const dump = await dumpVisualTree('pressed-state');
+    expect(dump).toMatchSnapshot();
+  });
+
+  test('DoubleClickWhenNotSelectable', async () => {
+    const textExample = await app.findElementByTestID('text-example');
+    await textExample.doubleClick();
+    const dump = await dumpVisualTree('pressed-state');
+    expect(dump).toMatchSnapshot();
+  });
+
+  test('PressableWhenSelectable', async () => {
+    await toggleSelectable();
+    const textExample = await app.findElementByTestID('text-example');
+    await textExample.click();
+    const dump = await dumpVisualTree('pressed-state');
+    expect(dump).toMatchSnapshot();
+  });
+
+  test('DoubleClickWhenSelectable', async () => {
+    await toggleSelectable();
+    const textExample = await app.findElementByTestID('text-example');
+    await textExample.doubleClick();
+    const dump = await dumpVisualTree('pressed-state');
+    expect(dump).toMatchSnapshot();
+  });
+});
+
+async function clearState() {
+  const clearButton = await app.findElementByTestID('clear-state-button');
+  await clearButton.click();
+}
+
+async function toggleSelectable() {
+  const toggleButton = await app.findElementByTestID('toggle-selectable-button');
+  await toggleButton.click();
+}
diff --git a/packages/e2e-test-app/test/__snapshots__/LegacySelectableTextTest.test.ts.snap b/packages/e2e-test-app/test/__snapshots__/LegacySelectableTextTest.test.ts.snap
new file mode 100644
index 00000000000..f2fc421d556
--- /dev/null
+++ b/packages/e2e-test-app/test/__snapshots__/LegacySelectableTextTest.test.ts.snap
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LegacySelectableTextTest DoubleClickWhenNotSelectable 1`] = `
+Object {
+  "AutomationId": "pressed-state",
+  "Clip": null,
+  "FlowDirection": "LeftToRight",
+  "Foreground": "#E4000000",
+  "Height": 19,
+  "HorizontalAlignment": "Stretch",
+  "Left": 0,
+  "Margin": "0,0,0,0",
+  "Padding": "0,0,0,0",
+  "Text": "Pressed: 2 times.",
+  "Top": 0,
+  "VerticalAlignment": "Stretch",
+  "Visibility": "Visible",
+  "Width": 103,
+  "XamlType": "Windows.UI.Xaml.Controls.TextBlock",
+}
+`;
+
+exports[`LegacySelectableTextTest DoubleClickWhenSelectable 1`] = `
+Object {
+  "AutomationId": "pressed-state",
+  "Clip": null,
+  "FlowDirection": "LeftToRight",
+  "Foreground": "#E4000000",
+  "Height": 19,
+  "HorizontalAlignment": "Stretch",
+  "Left": 0,
+  "Margin": "0,0,0,0",
+  "Padding": "0,0,0,0",
+  "Text": "Pressed: 1 times.",
+  "Top": 0,
+  "VerticalAlignment": "Stretch",
+  "Visibility": "Visible",
+  "Width": 103,
+  "XamlType": "Windows.UI.Xaml.Controls.TextBlock",
+}
+`;
+
+exports[`LegacySelectableTextTest PressableWhenNotSelectable 1`] = `
+Object {
+  "AutomationId": "pressed-state",
+  "Clip": null,
+  "FlowDirection": "LeftToRight",
+  "Foreground": "#E4000000",
+  "Height": 19,
+  "HorizontalAlignment": "Stretch",
+  "Left": 0,
+  "Margin": "0,0,0,0",
+  "Padding": "0,0,0,0",
+  "Text": "Pressed: 1 times.",
+  "Top": 0,
+  "VerticalAlignment": "Stretch",
+  "Visibility": "Visible",
+  "Width": 103,
+  "XamlType": "Windows.UI.Xaml.Controls.TextBlock",
+}
+`;
+
+exports[`LegacySelectableTextTest PressableWhenSelectable 1`] = `
+Object {
+  "AutomationId": "pressed-state",
+  "Clip": null,
+  "FlowDirection": "LeftToRight",
+  "Foreground": "#E4000000",
+  "Height": 19,
+  "HorizontalAlignment": "Stretch",
+  "Left": 0,
+  "Margin": "0,0,0,0",
+  "Padding": "0,0,0,0",
+  "Text": "Pressed: 1 times.",
+  "Top": 0,
+  "VerticalAlignment": "Stretch",
+  "Visibility": "Visible",
+  "Width": 103,
+  "XamlType": "Windows.UI.Xaml.Controls.TextBlock",
+}
+`;
diff --git a/vnext/Microsoft.ReactNative/ReactPointerEventArgs.cpp b/vnext/Microsoft.ReactNative/ReactPointerEventArgs.cpp
index e6cc11273cd..4a43326a78e 100644
--- a/vnext/Microsoft.ReactNative/ReactPointerEventArgs.cpp
+++ b/vnext/Microsoft.ReactNative/ReactPointerEventArgs.cpp
@@ -15,6 +15,12 @@ PointerEventKind ReactPointerEventArgs::Kind() const noexcept {
   return m_kind;
 }
 
+void ReactPointerEventArgs::Kind(PointerEventKind kind) noexcept {
+  assert(kind != PointerEventKind::Start);
+  assert(kind == PointerEventKind::Cancel || kind == PointerEventKind::End);
+  m_kind = kind;
+}
+
 winrt::IInspectable ReactPointerEventArgs::Target() const noexcept {
   return m_target;
 }
diff --git a/vnext/Microsoft.ReactNative/ReactPointerEventArgs.h b/vnext/Microsoft.ReactNative/ReactPointerEventArgs.h
index d79a54510eb..907b85e0d13 100644
--- a/vnext/Microsoft.ReactNative/ReactPointerEventArgs.h
+++ b/vnext/Microsoft.ReactNative/ReactPointerEventArgs.h
@@ -11,6 +11,7 @@ struct ReactPointerEventArgs : ReactPointerEventArgsT<ReactPointerEventArgs> {
   xaml::Input::PointerRoutedEventArgs Args() const noexcept;
 
   PointerEventKind Kind() const noexcept;
+  void Kind(PointerEventKind kind) noexcept;
 
   winrt::IInspectable Target() const noexcept;
   void Target(winrt::IInspectable const &target) noexcept;
diff --git a/vnext/Microsoft.ReactNative/ReactPointerEventArgs.idl b/vnext/Microsoft.ReactNative/ReactPointerEventArgs.idl
index f299638945a..5ee7c7d5319 100644
--- a/vnext/Microsoft.ReactNative/ReactPointerEventArgs.idl
+++ b/vnext/Microsoft.ReactNative/ReactPointerEventArgs.idl
@@ -48,9 +48,18 @@ namespace Microsoft.ReactNative {
     XAML_NAMESPACE.Input.PointerRoutedEventArgs Args {
       get;
     };
-    DOC_STRING("Gets the pointer event kind.")
+    DOC_STRING(
+      "Gets or sets the pointer event kind. The only valid overrides are:\n "
+      "- @PointerEventKind.Cancel\n"
+      "- @PointerEventKind.End\n"
+      "View managers must not override @PointerEventKind.Start kinds.\n"
+      "E.g., a view manager may choose to cancel the React pointer event "
+      "sequence after the pointer moves beyond a given threshold, or to "
+      "switch a @PointerEventKind.CaptureLost event to @PointerEventKind.End."
+    )
     PointerEventKind Kind {
       get;
+      set;
     };
     DOC_STRING("Gets or sets the React target for the pointer event.")
     Object Target {
diff --git a/vnext/Microsoft.ReactNative/Views/TextViewManager.cpp b/vnext/Microsoft.ReactNative/Views/TextViewManager.cpp
index 40d6a925d82..a7609db695b 100644
--- a/vnext/Microsoft.ReactNative/Views/TextViewManager.cpp
+++ b/vnext/Microsoft.ReactNative/Views/TextViewManager.cpp
@@ -4,6 +4,7 @@
 #include "pch.h"
 
 #include "TextViewManager.h"
+#include "TouchEventHandler.h"
 #include "Utils/ShadowNodeTypeUtils.h"
 #include "Utils/XamlIslandUtils.h"
 
@@ -37,6 +38,8 @@ class TextShadowNode final : public ShadowNodeBase {
   bool m_hasDescendantTextHighlighter{false};
   std::optional<winrt::Windows::UI::Color> m_backgroundColor{};
   std::optional<winrt::Windows::UI::Color> m_foregroundColor{};
+  std::unique_ptr<TouchEventHandler> m_touchEventHandler = nullptr;
+  winrt::event_revoker<xaml::Controls::ITextBlock> m_selectionChangedRevoker;
 
  public:
   TextShadowNode() {
@@ -125,7 +128,41 @@ class TextShadowNode final : public ShadowNodeBase {
     }
   }
 
+  void ToggleTouchEvents(XamlView xamlView, bool selectable) {
+    if (selectable) {
+      if (m_touchEventHandler == nullptr) {
+        m_touchEventHandler = std::make_unique<TouchEventHandler>(GetViewManager()->GetReactContext(), false);
+      }
+
+      m_selectionChangedRevoker = xamlView.as<xaml::Controls::TextBlock>().SelectionChanged(
+          winrt::auto_revoke, [selectionChanged = this->selectionChanged](const auto &sender, auto &&) {
+            const auto textBlock = sender.as<xaml::Controls::TextBlock>();
+            *selectionChanged =
+                *selectionChanged || textBlock.SelectionStart().Offset() != textBlock.SelectionEnd().Offset();
+          });
+
+      m_touchEventHandler->AddTouchHandlers(xamlView, GetRootView(), true);
+    } else {
+      if (m_touchEventHandler != nullptr) {
+        m_touchEventHandler->RemoveTouchHandlers();
+        m_selectionChangedRevoker.revoke();
+      }
+    }
+  }
+
+  XamlView GetRootView() {
+    if (auto uiManager = GetNativeUIManager(GetViewManager()->GetReactContext()).lock()) {
+      auto shadowNode = uiManager->getHost()->FindShadowNodeForTag(m_rootTag);
+      if (!shadowNode)
+        return nullptr;
+
+      return static_cast<::Microsoft::ReactNative::ShadowNodeBase *>(shadowNode)->GetView();
+    }
+    return nullptr;
+  }
+
   TextTransform textTransform{TextTransform::Undefined};
+  std::shared_ptr<bool> selectionChanged = std::make_shared<bool>(false);
 };
 
 TextViewManager::TextViewManager(const Mso::React::IReactContext &context) : Super(context) {}
@@ -199,14 +236,17 @@ bool TextViewManager::UpdateProperty(
       textBlock.ClearValue(xaml::Controls::TextBlock::LineStackingStrategyProperty());
     }
   } else if (propertyName == "selectable") {
+    const auto node = static_cast<TextShadowNode *>(nodeToUpdate);
     if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean) {
       const auto selectable = propertyValue.AsBoolean();
       textBlock.IsTextSelectionEnabled(selectable);
+      node->ToggleTouchEvents(textBlock, selectable);
       if (selectable) {
         EnsureUniqueTextFlyoutForXamlIsland(textBlock);
       }
     } else if (propertyValue.IsNull()) {
       textBlock.ClearValue(xaml::Controls::TextBlock::IsTextSelectionEnabledProperty());
+      node->ToggleTouchEvents(textBlock, false);
       ClearUniqueTextFlyoutForXamlIsland(textBlock);
     }
   } else if (propertyName == "allowFontScaling") {
@@ -280,6 +320,18 @@ YGMeasureFunc TextViewManager::GetYogaCustomMeasureFunc() const {
   return DefaultYogaSelfMeasureFunc;
 }
 
+void TextViewManager::OnPointerEvent(
+    ShadowNodeBase *node,
+    const winrt::Microsoft::ReactNative::ReactPointerEventArgs &args) {
+  if (args.Kind() == winrt::Microsoft::ReactNative::PointerEventKind::CaptureLost) {
+    const auto textNode = static_cast<const TextShadowNode *>(node);
+    if (!*textNode->selectionChanged) {
+      args.Kind(winrt::Microsoft::ReactNative::PointerEventKind::End);
+    }
+    *textNode->selectionChanged = false;
+  }
+}
+
 /*static*/ void TextViewManager::UpdateTextHighlighters(ShadowNodeBase *node, bool highlightAdded) {
   if (IsTextShadowNode(node)) {
     const auto textNode = static_cast<TextShadowNode *>(node);
diff --git a/vnext/Microsoft.ReactNative/Views/TextViewManager.h b/vnext/Microsoft.ReactNative/Views/TextViewManager.h
index abe7ca175e4..981a8e63e59 100644
--- a/vnext/Microsoft.ReactNative/Views/TextViewManager.h
+++ b/vnext/Microsoft.ReactNative/Views/TextViewManager.h
@@ -24,6 +24,8 @@ class TextViewManager : public FrameworkElementViewManager {
 
   YGMeasureFunc GetYogaCustomMeasureFunc() const override;
 
+  void OnPointerEvent(ShadowNodeBase *node, const winrt::Microsoft::ReactNative::ReactPointerEventArgs &args) override;
+
   static void UpdateTextHighlighters(ShadowNodeBase *node, bool highlightAdded);
 
   static TextTransform GetTextTransformValue(ShadowNodeBase *node);
diff --git a/vnext/Microsoft.ReactNative/Views/TouchEventHandler.cpp b/vnext/Microsoft.ReactNative/Views/TouchEventHandler.cpp
index d26bb18130e..8e240928631 100644
--- a/vnext/Microsoft.ReactNative/Views/TouchEventHandler.cpp
+++ b/vnext/Microsoft.ReactNative/Views/TouchEventHandler.cpp
@@ -36,6 +36,7 @@ std::vector<int64_t> GetTagsForBranch(INativeUIManagerHost *host, int64_t tag, i
 
 TouchEventHandler::TouchEventHandler(const Mso::React::IReactContext &context, bool fabric)
     : m_xamlView(nullptr),
+      m_rootView(nullptr),
       m_context(&context),
       m_fabric(fabric),
       m_batchingEventEmitter{
@@ -45,33 +46,49 @@ TouchEventHandler::~TouchEventHandler() {
   RemoveTouchHandlers();
 }
 
-void TouchEventHandler::AddTouchHandlers(XamlView xamlView) {
+void TouchEventHandler::AddTouchHandlers(XamlView xamlView, XamlView rootView, bool handledEventsToo) {
   auto uiElement(xamlView.as<xaml::UIElement>());
   if (uiElement == nullptr) {
     assert(false);
     return;
   }
 
-  m_xamlView = xamlView;
-
   RemoveTouchHandlers();
 
-  m_pressedRevoker = uiElement.PointerPressed(winrt::auto_revoke, {this, &TouchEventHandler::OnPointerPressed});
-  m_releasedRevoker = uiElement.PointerReleased(winrt::auto_revoke, {this, &TouchEventHandler::OnPointerReleased});
-  m_canceledRevoker = uiElement.PointerCanceled(winrt::auto_revoke, {this, &TouchEventHandler::OnPointerCanceled});
-  m_captureLostRevoker =
-      uiElement.PointerCaptureLost(winrt::auto_revoke, {this, &TouchEventHandler::OnPointerCaptureLost});
-  m_exitedRevoker = uiElement.PointerExited(winrt::auto_revoke, {this, &TouchEventHandler::OnPointerExited});
-  m_movedRevoker = uiElement.PointerMoved(winrt::auto_revoke, {this, &TouchEventHandler::OnPointerMoved});
+  m_xamlView = xamlView;
+  m_rootView = rootView;
+  m_pressedHandler = winrt::box_value(winrt::PointerEventHandler{this, &TouchEventHandler::OnPointerPressed});
+  m_releasedHandler = winrt::box_value(winrt::PointerEventHandler{this, &TouchEventHandler::OnPointerReleased});
+  m_canceledHandler = winrt::box_value(winrt::PointerEventHandler{this, &TouchEventHandler::OnPointerCanceled});
+  m_captureLostHandler = winrt::box_value(winrt::PointerEventHandler{this, &TouchEventHandler::OnPointerCaptureLost});
+  m_exitedHandler = winrt::box_value(winrt::PointerEventHandler{this, &TouchEventHandler::OnPointerExited});
+  m_movedHandler = winrt::box_value(winrt::PointerEventHandler{this, &TouchEventHandler::OnPointerMoved});
+  uiElement.AddHandler(xaml::UIElement::PointerPressedEvent(), m_pressedHandler, handledEventsToo);
+  uiElement.AddHandler(xaml::UIElement::PointerReleasedEvent(), m_releasedHandler, handledEventsToo);
+  uiElement.AddHandler(xaml::UIElement::PointerCanceledEvent(), m_canceledHandler, handledEventsToo);
+  uiElement.AddHandler(xaml::UIElement::PointerCaptureLostEvent(), m_captureLostHandler, handledEventsToo);
+  uiElement.AddHandler(xaml::UIElement::PointerExitedEvent(), m_exitedHandler, handledEventsToo);
+  uiElement.AddHandler(xaml::UIElement::PointerMovedEvent(), m_movedHandler, handledEventsToo);
 }
 
 void TouchEventHandler::RemoveTouchHandlers() {
-  m_pressedRevoker.revoke();
-  m_releasedRevoker.revoke();
-  m_canceledRevoker.revoke();
-  m_captureLostRevoker.revoke();
-  m_exitedRevoker.revoke();
-  m_movedRevoker.revoke();
+  if (m_xamlView) {
+    auto uiElement(m_xamlView.as<xaml::UIElement>());
+    uiElement.RemoveHandler(xaml::UIElement::PointerPressedEvent(), m_pressedHandler);
+    uiElement.RemoveHandler(xaml::UIElement::PointerReleasedEvent(), m_releasedHandler);
+    uiElement.RemoveHandler(xaml::UIElement::PointerCanceledEvent(), m_canceledHandler);
+    uiElement.RemoveHandler(xaml::UIElement::PointerCaptureLostEvent(), m_captureLostHandler);
+    uiElement.RemoveHandler(xaml::UIElement::PointerExitedEvent(), m_exitedHandler);
+    uiElement.RemoveHandler(xaml::UIElement::PointerMovedEvent(), m_movedHandler);
+    m_pressedHandler = nullptr;
+    m_releasedHandler = nullptr;
+    m_canceledHandler = nullptr;
+    m_captureLostHandler = nullptr;
+    m_exitedHandler = nullptr;
+    m_movedHandler = nullptr;
+    m_rootView = nullptr;
+    m_xamlView = nullptr;
+  }
 }
 
 winrt::Microsoft::ReactNative::BatchingEventEmitter &TouchEventHandler::BatchingEmitter() noexcept {
@@ -251,7 +268,7 @@ void TouchEventHandler::UpdateReactPointer(
     ReactPointer &pointer,
     const winrt::PointerRoutedEventArgs &args,
     xaml::UIElement sourceElement) {
-  auto rootPoint = args.GetCurrentPoint(m_xamlView.as<xaml::FrameworkElement>());
+  auto rootPoint = args.GetCurrentPoint(m_rootView.as<xaml::FrameworkElement>());
   auto point = args.GetCurrentPoint(sourceElement);
   auto props = point.Properties();
   auto keyModifiers = static_cast<uint32_t>(args.KeyModifiers());
diff --git a/vnext/Microsoft.ReactNative/Views/TouchEventHandler.h b/vnext/Microsoft.ReactNative/Views/TouchEventHandler.h
index a442547a607..487634a56e1 100644
--- a/vnext/Microsoft.ReactNative/Views/TouchEventHandler.h
+++ b/vnext/Microsoft.ReactNative/Views/TouchEventHandler.h
@@ -33,7 +33,7 @@ class TouchEventHandler {
   TouchEventHandler(const Mso::React::IReactContext &context, bool fabric);
   virtual ~TouchEventHandler();
 
-  void AddTouchHandlers(XamlView xamlView);
+  void AddTouchHandlers(XamlView xamlView, XamlView rootView = nullptr, bool handledEventsToo = false);
   void RemoveTouchHandlers();
   winrt::Microsoft::ReactNative::BatchingEventEmitter &BatchingEmitter() noexcept;
 
@@ -44,12 +44,12 @@ class TouchEventHandler {
   void OnPointerCaptureLost(const winrt::IInspectable &, const winrt::PointerRoutedEventArgs &args);
   void OnPointerExited(const winrt::IInspectable &, const winrt::PointerRoutedEventArgs &args);
   void OnPointerMoved(const winrt::IInspectable &, const winrt::PointerRoutedEventArgs &args);
-  winrt::event_revoker<winrt::IUIElement> m_pressedRevoker;
-  winrt::event_revoker<winrt::IUIElement> m_releasedRevoker;
-  winrt::event_revoker<winrt::IUIElement> m_canceledRevoker;
-  winrt::event_revoker<winrt::IUIElement> m_captureLostRevoker;
-  winrt::event_revoker<winrt::IUIElement> m_exitedRevoker;
-  winrt::event_revoker<winrt::IUIElement> m_movedRevoker;
+  winrt::IInspectable m_pressedHandler;
+  winrt::IInspectable m_releasedHandler;
+  winrt::IInspectable m_canceledHandler;
+  winrt::IInspectable m_captureLostHandler;
+  winrt::IInspectable m_exitedHandler;
+  winrt::IInspectable m_movedHandler;
 
   struct ReactPointer {
     int64_t target = 0;
@@ -114,6 +114,7 @@ class TouchEventHandler {
       bool &isHit);
 
   XamlView m_xamlView;
+  XamlView m_rootView;
   Mso::CntPtr<const Mso::React::IReactContext> m_context;
   bool m_fabric;
   std::shared_ptr<winrt::Microsoft::ReactNative::BatchingEventEmitter> m_batchingEventEmitter;

From 1af10cff4ddb53364c0e3fbaa80c86d6f5515e4d Mon Sep 17 00:00:00 2001
From: Eric Rozell <erozell@outlook.com>
Date: Thu, 30 Sep 2021 11:03:52 -0400
Subject: [PATCH 2/5] Change files

---
 ...ative-windows-8d2055e1-81e4-41ad-8d20-8eec501733b3.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/react-native-windows-8d2055e1-81e4-41ad-8d20-8eec501733b3.json

diff --git a/change/react-native-windows-8d2055e1-81e4-41ad-8d20-8eec501733b3.json b/change/react-native-windows-8d2055e1-81e4-41ad-8d20-8eec501733b3.json
new file mode 100644
index 00000000000..7a14ce8521d
--- /dev/null
+++ b/change/react-native-windows-8d2055e1-81e4-41ad-8d20-8eec501733b3.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Allow pointer events on selectable Text",
+  "packageName": "react-native-windows",
+  "email": "erozell@outlook.com",
+  "dependentChangeType": "patch"
+}

From 6a3e8fc631a89d86dd1796aa71a15a4bdc037251 Mon Sep 17 00:00:00 2001
From: Eric Rozell <erozell@outlook.com>
Date: Mon, 4 Oct 2021 13:06:10 -0400
Subject: [PATCH 3/5] Handle overrides of PointerCaptureLost events to emit
 `onTouchEnd` as opposed to `onTouchCancel`.

---
 vnext/Microsoft.ReactNative/ReactPointerEventArgs.cpp |  4 ++--
 vnext/Microsoft.ReactNative/ReactPointerEventArgs.idl | 11 ++++-------
 .../Microsoft.ReactNative/Views/TouchEventHandler.cpp |  7 ++++++-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/vnext/Microsoft.ReactNative/ReactPointerEventArgs.cpp b/vnext/Microsoft.ReactNative/ReactPointerEventArgs.cpp
index 4a43326a78e..83f903eccf8 100644
--- a/vnext/Microsoft.ReactNative/ReactPointerEventArgs.cpp
+++ b/vnext/Microsoft.ReactNative/ReactPointerEventArgs.cpp
@@ -16,8 +16,8 @@ PointerEventKind ReactPointerEventArgs::Kind() const noexcept {
 }
 
 void ReactPointerEventArgs::Kind(PointerEventKind kind) noexcept {
-  assert(kind != PointerEventKind::Start);
-  assert(kind == PointerEventKind::Cancel || kind == PointerEventKind::End);
+  // The only event type change that is supported is CaptureLost to End.
+  assert(kind == PointerEventKind::End && m_kind == PointerEventKind::CaptureLost);
   m_kind = kind;
 }
 
diff --git a/vnext/Microsoft.ReactNative/ReactPointerEventArgs.idl b/vnext/Microsoft.ReactNative/ReactPointerEventArgs.idl
index 5ee7c7d5319..00d2c424017 100644
--- a/vnext/Microsoft.ReactNative/ReactPointerEventArgs.idl
+++ b/vnext/Microsoft.ReactNative/ReactPointerEventArgs.idl
@@ -49,13 +49,10 @@ namespace Microsoft.ReactNative {
       get;
     };
     DOC_STRING(
-      "Gets or sets the pointer event kind. The only valid overrides are:\n "
-      "- @PointerEventKind.Cancel\n"
-      "- @PointerEventKind.End\n"
-      "View managers must not override @PointerEventKind.Start kinds.\n"
-      "E.g., a view manager may choose to cancel the React pointer event "
-      "sequence after the pointer moves beyond a given threshold, or to "
-      "switch a @PointerEventKind.CaptureLost event to @PointerEventKind.End."
+      "Gets or sets the pointer event kind. The only valid override is "
+      "@PointerEventKind.CaptureLost to @PointerEventKind.End to handle cases "
+      "where PointerCaptureLost events on ReactRootView can be safely treated "
+      "as PointerReleased events, e.g., for pointer events on selectable text."
     )
     PointerEventKind Kind {
       get;
diff --git a/vnext/Microsoft.ReactNative/Views/TouchEventHandler.cpp b/vnext/Microsoft.ReactNative/Views/TouchEventHandler.cpp
index 8e240928631..8600150dba7 100644
--- a/vnext/Microsoft.ReactNative/Views/TouchEventHandler.cpp
+++ b/vnext/Microsoft.ReactNative/Views/TouchEventHandler.cpp
@@ -215,7 +215,12 @@ void TouchEventHandler::OnPointerConcluded(TouchEventType eventType, const winrt
     UpdateReactPointer(m_pointers[*optPointerIndex], args, sourceElement);
 
   if (m_pointers[*optPointerIndex].isLeftButton) {
-    DispatchTouchEvent(eventType, *optPointerIndex);
+    // In case a PointerCaptureLost event should be treated as an "end" event,
+    // check the ReactPointerEventArgs Kind property before emitting the event.
+    const auto adjustedEventType = reactArgs.Kind() == winrt::Microsoft::ReactNative::PointerEventKind::End
+        ? TouchEventType::End
+        : TouchEventType::Cancel;
+    DispatchTouchEvent(adjustedEventType, *optPointerIndex);
   }
 
   m_pointers.erase(cbegin(m_pointers) + *optPointerIndex);

From ad7ad48aee4826b4a01ef9c7e0157fedc0610296 Mon Sep 17 00:00:00 2001
From: Eric Rozell <erozell@outlook.com>
Date: Mon, 4 Oct 2021 17:35:30 -0400
Subject: [PATCH 4/5] yarn lint --fix

---
 packages/e2e-test-app/test/LegacySelectableTextTest.test.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/e2e-test-app/test/LegacySelectableTextTest.test.ts b/packages/e2e-test-app/test/LegacySelectableTextTest.test.ts
index f1c9c16e775..52db0cb7b17 100644
--- a/packages/e2e-test-app/test/LegacySelectableTextTest.test.ts
+++ b/packages/e2e-test-app/test/LegacySelectableTextTest.test.ts
@@ -55,6 +55,8 @@ async function clearState() {
 }
 
 async function toggleSelectable() {
-  const toggleButton = await app.findElementByTestID('toggle-selectable-button');
+  const toggleButton = await app.findElementByTestID(
+    'toggle-selectable-button',
+  );
   await toggleButton.click();
 }

From 4c50a0c1f533128bb62970b172b1dd04cb1c09dc Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@microsoft.com>
Date: Fri, 8 Oct 2021 08:08:10 -0700
Subject: [PATCH 5/5] yarn format

---
 vnext/Microsoft.ReactNative/Views/TextViewManager.cpp | 1 -
 1 file changed, 1 deletion(-)

diff --git a/vnext/Microsoft.ReactNative/Views/TextViewManager.cpp b/vnext/Microsoft.ReactNative/Views/TextViewManager.cpp
index 69108bc797b..b979e7967ef 100644
--- a/vnext/Microsoft.ReactNative/Views/TextViewManager.cpp
+++ b/vnext/Microsoft.ReactNative/Views/TextViewManager.cpp
@@ -331,7 +331,6 @@ YGMeasureFunc TextViewManager::GetYogaCustomMeasureFunc() const {
 void TextViewManager::OnPointerEvent(
     ShadowNodeBase *node,
     winrt::Microsoft::ReactNative::ReactPointerEventArgs const &args) {
-
   const auto textNode = static_cast<TextShadowNode *>(node);
   const auto textBlock = node->GetView().as<xaml::Controls::TextBlock>();
   if (textNode->m_hasDescendantPressable && args.Target() == node->GetView()) {