Components do not lose hover state if pointer leaves window before it…

… leaves the component (#14375) * Components do not lost hover state if pointer leaves window before it leaves the component * format * Change files --------- Co-authored-by: Tatiana Kapos <[email protected]>
microsoft · Mar 6, 2025 · 4640656 · 4640656
1 parent cddb834
commit 4640656
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/change/react-native-windows-61361492-e98e-45f9-931a-795d9a86919b.json b/change/react-native-windows-61361492-e98e-45f9-931a-795d9a86919b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Components do not lost hover state if pointer leaves window before it leaves the component",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp
@@ -196,6 +196,20 @@ void CompositionEventHandler::Initialize() noexcept {
       }
     });
 
+    m_pointerExitedToken = pointerSource.PointerExited([wkThis = weak_from_this()](
+                                                           winrt::Microsoft::UI::Input::InputPointerSource const &,
+                                                           winrt::Microsoft::UI::Input::PointerEventArgs const &args) {
+      if (auto strongThis = wkThis.lock()) {
+        if (auto strongRootView = strongThis->m_wkRootView.get()) {
+          if (strongThis->SurfaceId() == -1)
+            return;
+          auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+              args.CurrentPoint(), strongRootView.ScaleFactor());
+          strongThis->onPointerExited(pp, args.KeyModifiers());
+        }
+      }
+    });
+
     m_pointerCaptureLostToken =
         pointerSource.PointerCaptureLost([wkThis = weak_from_this()](
                                              winrt::Microsoft::UI::Input::InputPointerSource const &,
@@ -1063,6 +1077,34 @@ void CompositionEventHandler::onPointerMoved(
   }
 }
 
+void CompositionEventHandler::onPointerExited(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
+    winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept {
+  if (SurfaceId() == -1)
+    return;
+
+  int pointerId = pointerPoint.PointerId();
+  auto position = pointerPoint.Position();
+
+  if (std::shared_ptr<FabricUIManager> fabricuiManager =
+          ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_context.Properties())) {
+    facebook::react::Tag tag = -1;
+    facebook::react::Point ptLocal, ptScaled;
+    getTargetPointerArgs(fabricuiManager, pointerPoint, tag, ptScaled, ptLocal);
+
+    tag = -1;
+
+    auto args = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerRoutedEventArgs>(
+        m_context, tag, pointerPoint, keyModifiers);
+
+    facebook::react::PointerEvent pointerEvent = CreatePointerEventFromIncompleteHoverData(ptScaled, ptLocal);
+
+    auto handler = [](std::vector<winrt::Microsoft::ReactNative::ComponentView> &eventPathViews) {};
+
+    HandleIncomingPointerEvent(pointerEvent, nullptr, pointerPoint, keyModifiers, handler);
+  }
+}
+
 void CompositionEventHandler::onPointerPressed(
     const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
     winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept {

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h
@@ -57,6 +57,9 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
   void onPointerMoved(
       const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
       winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept;
+  void onPointerExited(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
+      winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept;
   void onPointerWheelChanged(
       const winrt::Microsoft::ReactNative::Composition::Input::PointerPoint &pointerPoint,
       winrt::Windows::System::VirtualKeyModifiers keyModifiers) noexcept;
@@ -169,6 +172,7 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
   winrt::event_token m_pointerMovedToken;
   winrt::event_token m_pointerWheelChangedToken;
   winrt::event_token m_pointerCaptureLostToken;
+  winrt::event_token m_pointerExitedToken;
   winrt::event_token m_keyDownToken;
   winrt::event_token m_keyUpToken;
   winrt::event_token m_characterReceivedToken;