Ensures pointer event is updated when leaving bounds of React root (#…

…10407)

* Ensures pointer event is updated when leaving bounds of React root

Previously, if we did not find a valid React target, we would not update
the pointer data, resulting in firing the `onTouchEnd` with the last
data used while the pointer was still inside the React root.

This change ensures that, while the pointer is down (i.e., we have a
captured pointer in the React root), we continue to update the pointer
data and also emit move events. The viewX / viewY values of the pointer
will be relative to the declared root view.

Fixes #10406

* Change files

change/react-native-windows-78d2b45c-6011-4a3d-a20b-6914e08531d9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Ensures pointer event is updated when leaving bounds of React root",
+  "packageName": "react-native-windows",
+  "email": "erozell@outlook.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Views/TouchEventHandler.cpp

@@ -178,12 +178,12 @@ void TouchEventHandler::OnPointerMoved(
   const auto eventType = TouchEventType::Move;
   const auto kind = GetPointerEventKind(eventType);
   const auto reactArgs = winrt::make<winrt::Microsoft::ReactNative::implementation::ReactPointerEventArgs>(kind, args);
-  if (!PropagatePointerEventAndFindReactSourceBranch(reactArgs, &tagsForBranch, &sourceElement))
-    return;
+  const auto hasReactTarget = PropagatePointerEventAndFindReactSourceBranch(reactArgs, &tagsForBranch, &sourceElement);
 
   const auto optPointerIndex = IndexOfPointerWithId(args.Pointer().PointerId());
   if (optPointerIndex) {
-    UpdateReactPointer(m_pointers[*optPointerIndex], args, sourceElement);
+    UpdateReactPointer(
+        m_pointers[*optPointerIndex], args, hasReactTarget ? sourceElement : m_rootView.as<xaml::UIElement>());
     DispatchTouchEvent(eventType, *optPointerIndex);
   }
 
@@ -207,8 +207,9 @@ void TouchEventHandler::OnPointerConcluded(TouchEventType eventType, const winrt
   xaml::UIElement sourceElement(nullptr);
   const auto kind = GetPointerEventKind(eventType);
   const auto reactArgs = winrt::make<winrt::Microsoft::ReactNative::implementation::ReactPointerEventArgs>(kind, args);
-  if (PropagatePointerEventAndFindReactSourceBranch(reactArgs, &tagsForBranch, &sourceElement))
-    UpdateReactPointer(m_pointers[*optPointerIndex], args, sourceElement);
+  const auto hasReactTarget = PropagatePointerEventAndFindReactSourceBranch(reactArgs, &tagsForBranch, &sourceElement);
+  UpdateReactPointer(
+      m_pointers[*optPointerIndex], args, hasReactTarget ? sourceElement : m_rootView.as<xaml::UIElement>());
 
   // In case a PointerCaptureLost event should be treated as an "end" event,
   // check the ReactPointerEventArgs Kind property before emitting the event.