react-native-windows 0.81.4 → 0.81.6

package/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp

@@ -323,6 +323,32 @@ void CompositionEventHandler::Initialize() noexcept {
             }
           }
         });
+
+    m_contextMenuKeyToken =
+        keyboardSource.ContextMenuKey([wkThis = weak_from_this()](
+                                          winrt::Microsoft::UI::Input::InputKeyboardSource const & /*source*/,
+                                          winrt::Microsoft::UI::Input::ContextMenuKeyEventArgs const &args) {
+          if (auto strongThis = wkThis.lock()) {
+            if (auto strongRootView = strongThis->m_wkRootView.get()) {
+              if (strongThis->SurfaceId() == -1)
+                return;
+
+              auto focusedComponent = strongThis->RootComponentView().GetFocusedComponent();
+              if (focusedComponent) {
+                auto tag =
+                    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(focusedComponent)
+                        ->Tag();
+                auto contextMenuArgs = winrt::make<
+                    winrt::Microsoft::ReactNative::Composition::Input::implementation::ContextMenuKeyEventArgs>(tag);
+                winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(focusedComponent)
+                    ->OnContextMenuKey(contextMenuArgs);
+                if (contextMenuArgs.Handled()) {
+                  args.Handled(true);
+                }
+              }
+            }
+          }
+        });
   }
 #endif
 }
@@ -341,6 +367,7 @@ CompositionEventHandler::~CompositionEventHandler() {
       keyboardSource.KeyDown(m_keyDownToken);
       keyboardSource.KeyUp(m_keyUpToken);
       keyboardSource.CharacterReceived(m_characterReceivedToken);
+      keyboardSource.ContextMenuKey(m_contextMenuKeyToken);
     }
   }
 #endif
@@ -449,6 +476,54 @@ int64_t CompositionEventHandler::SendMessage(HWND hwnd, uint32_t msg, uint64_t w
       }
       return 0;
     }
+    case WM_RBUTTONDOWN: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerPressed(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
+    case WM_RBUTTONUP: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerReleased(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
+    case WM_MBUTTONDOWN: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerPressed(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
+    case WM_MBUTTONUP: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerReleased(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
+    case WM_XBUTTONDOWN: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerPressed(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
+    case WM_XBUTTONUP: {
+      if (auto strongRootView = m_wkRootView.get()) {
+        auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(
+            hwnd, msg, wParam, lParam, strongRootView.ScaleFactor());
+        onPointerReleased(pp, GetKeyModifiers(wParam));
+      }
+      return 0;
+    }
     case WM_POINTERUP: {
       if (auto strongRootView = m_wkRootView.get()) {
         auto pp = winrt::make<winrt::Microsoft::ReactNative::Composition::Input::implementation::PointerPoint>(

package/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h

@@ -176,6 +176,7 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
   winrt::event_token m_keyDownToken;
   winrt::event_token m_keyUpToken;
   winrt::event_token m_characterReceivedToken;
+  winrt::event_token m_contextMenuKeyToken;
 #endif
 };
 

package/Microsoft.ReactNative/Fabric/Composition/CompositionHwndHost.cpp

@@ -32,55 +32,20 @@ CompositionHwndHost::CompositionHwndHost() noexcept {}
 void CompositionHwndHost::Initialize(uint64_t hwnd) noexcept {
   m_hwnd = (HWND)hwnd;
 
-  auto compositionContext =
-      winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
-          ReactViewHost().ReactNativeHost().InstanceSettings().Properties());
-#if USE_WINUI3
-  if (auto liftedCompositor =
-          winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerCompositor(
-              compositionContext)) {
-    m_compRootView = winrt::Microsoft::ReactNative::ReactNativeIsland(liftedCompositor);
-
-    auto bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
-        liftedCompositor, winrt::Microsoft::UI::GetWindowIdFromWindow(m_hwnd));
+  auto compositor = winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositor(
+      ReactViewHost().ReactNativeHost().InstanceSettings().Properties());
+  m_compRootView = winrt::Microsoft::ReactNative::ReactNativeIsland(compositor);
 
-    auto island = m_compRootView.Island();
+  auto bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
+      compositor, winrt::Microsoft::UI::GetWindowIdFromWindow(m_hwnd));
 
-    bridge.Connect(island);
-    bridge.Show();
+  auto island = m_compRootView.Island();
 
-    m_compRootView.ScaleFactor(ScaleFactor());
-    bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
-  } else {
-    m_compRootView = winrt::Microsoft::ReactNative::ReactNativeIsland();
-    m_compRootView.as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
-        .SetWindow(reinterpret_cast<uint64_t>(m_hwnd));
-
-#endif
-    auto compositor =
-        winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerCompositor(
-            compositionContext);
-    auto interop = compositor.as<ABI::Windows::UI::Composition::Desktop::ICompositorDesktopInterop>();
-    winrt::Windows::UI::Composition::Desktop::DesktopWindowTarget target{nullptr};
-    check_hresult(interop->CreateDesktopWindowTarget(
-        m_hwnd,
-        false,
-        reinterpret_cast<ABI::Windows::UI::Composition::Desktop::IDesktopWindowTarget **>(put_abi(target))));
-
-    auto root = compositor.CreateContainerVisual();
-    root.RelativeSizeAdjustment({1.0f, 1.0f});
-    root.Offset({0, 0, 0});
-    root.Comment(L"Root Visual");
-    target.Root(root);
-
-    m_compRootView.as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
-        .InternalRootVisual(
-            winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::CreateVisual(
-                target.Root()));
+  bridge.Connect(island);
+  bridge.Show();
 
-#if USE_WINUI3
-  }
-#endif
+  m_compRootView.ScaleFactor(ScaleFactor());
+  bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
 
   m_compRootView.ReactViewHost(std::move(m_reactViewHost));
   m_compRootView.ScaleFactor(ScaleFactor());

package/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp

@@ -38,10 +38,11 @@ constexpr float FOCUS_VISUAL_RADIUS = 3.0f;
 
 // m_outerVisual
 //   |
-//   |
 //   ----- m_visual <-- Background / clip - Can be a custom visual depending on Component type
 //            |
 //            ----- Border Visuals x N (BorderPrimitive attached to m_visual)
+//            ----- <children> (default: directly in m_visual after border visuals)
+//            ----- m_childrenContainer (created on demand when overflow:hidden, children moved here)
 //   ------Focus Visual Container (created when hosting focus visuals)
 //           |
 //           |------Inner Focus Visual
@@ -527,10 +528,10 @@ facebook::react::RectangleEdges<bool> ComponentView::focusNudges() const noexcep
 
   Assert(m_componentHostingFocusVisual);
 
-  if (layoutMetrics.frame.origin.x < 0) {
+  if (layoutMetrics.frame.origin.x < m_componentHostingFocusVisual->m_layoutMetrics.frame.origin.x) {
     nudgeEdges.left = true;
   }
-  if (layoutMetrics.frame.origin.y < 0) {
+  if (layoutMetrics.frame.origin.y < m_componentHostingFocusVisual->m_layoutMetrics.frame.origin.y) {
     nudgeEdges.top = true;
   }
   if (layoutMetrics.frame.getMaxX() > m_componentHostingFocusVisual->m_layoutMetrics.frame.getMaxX()) {
@@ -710,86 +711,9 @@ void ComponentView::applyShadowProps(const facebook::react::ViewProps &viewProps
       shadow.Color(theme()->Color(*viewProps.shadowColor));
   }
 
-  // Check if any border radius is set
-  auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, viewProps);
-  bool hasBorderRadius = borderMetrics.borderRadii.topLeft.horizontal != 0 ||
-      borderMetrics.borderRadii.topRight.horizontal != 0 || borderMetrics.borderRadii.bottomLeft.horizontal != 0 ||
-      borderMetrics.borderRadii.bottomRight.horizontal != 0 || borderMetrics.borderRadii.topLeft.vertical != 0 ||
-      borderMetrics.borderRadii.topRight.vertical != 0 || borderMetrics.borderRadii.bottomLeft.vertical != 0 ||
-      borderMetrics.borderRadii.bottomRight.vertical != 0;
-
-  if (hasBorderRadius) {
-    // When borderRadius is set, we need to create a shadow mask that follows the rounded rectangle shape.
-    // Use CompositionVisualSurface to capture the clipped visual's appearance as the shadow mask.
-    bool maskSet = false;
-
-    // Try Microsoft (WinUI3) Composition first
-    auto msCompositor =
-        winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerCompositor(
-            m_compContext);
-    if (msCompositor) {
-      auto innerVisual =
-          winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
-              Visual());
-      if (innerVisual) {
-        // Create a VisualSurface that captures the visual (with its clip applied)
-        auto visualSurface = msCompositor.CreateVisualSurface();
-        visualSurface.SourceVisual(innerVisual);
-        visualSurface.SourceSize(
-            {m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor,
-             m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor});
-
-        // Create a brush from the visual surface to use as shadow mask
-        auto maskBrush = msCompositor.CreateSurfaceBrush(visualSurface);
-        maskBrush.Stretch(winrt::Microsoft::UI::Composition::CompositionStretch::Fill);
-
-        // Get the inner shadow and set the mask
-        auto innerShadow = winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::
-            InnerDropShadow(shadow);
-        if (innerShadow) {
-          innerShadow.Mask(maskBrush);
-          maskSet = true;
-        }
-      }
-    }
-
-    // Fallback to System (Windows.UI) Composition if Microsoft Composition is not available
-    if (!maskSet) {
-      auto sysCompositor =
-          winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerCompositor(
-              m_compContext);
-      if (sysCompositor) {
-        auto innerVisual =
-            winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerVisual(
-                Visual());
-        if (innerVisual) {
-          auto visualSurface = sysCompositor.CreateVisualSurface();
-          visualSurface.SourceVisual(innerVisual);
-          visualSurface.SourceSize(
-              {m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor,
-               m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor});
-
-          auto maskBrush = sysCompositor.CreateSurfaceBrush(visualSurface);
-          maskBrush.Stretch(winrt::Windows::UI::Composition::CompositionStretch::Fill);
-
-          auto innerShadow =
-              winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerDropShadow(
-                  shadow);
-          if (innerShadow) {
-            innerShadow.Mask(maskBrush);
-          }
-        }
-      }
-    }
-
-    // Apply shadow to OuterVisual (which is not clipped) so the shadow can extend beyond the clip
-    OuterVisual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
-    Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(nullptr);
-  } else {
-    // No border radius - apply shadow directly to Visual (original behavior)
-    Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
-    OuterVisual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(nullptr);
-  }
+  // Apply shadow to OuterVisual (not Visual) because Visual may have a rounded-corner clip
+  // from updateClippingPath, which would clip the shadow. OuterVisual is not clipped.
+  OuterVisual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
 }
 
 void ComponentView::updateTransformProps(
@@ -973,23 +897,26 @@ void ComponentView::updateClippingPath(
     const facebook::react::ViewProps &viewProps) noexcept {
   auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
 
-  if (borderMetrics.borderRadii.topLeft.horizontal == 0 && borderMetrics.borderRadii.topRight.horizontal == 0 &&
-      borderMetrics.borderRadii.bottomLeft.horizontal == 0 && borderMetrics.borderRadii.bottomRight.horizontal == 0 &&
-      borderMetrics.borderRadii.topLeft.vertical == 0 && borderMetrics.borderRadii.topRight.vertical == 0 &&
-      borderMetrics.borderRadii.bottomLeft.vertical == 0 && borderMetrics.borderRadii.bottomRight.vertical == 0) {
-    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
-  } else {
+  bool hasRoundedCorners = borderMetrics.borderRadii.topLeft.horizontal != 0 ||
+      borderMetrics.borderRadii.topRight.horizontal != 0 || borderMetrics.borderRadii.bottomLeft.horizontal != 0 ||
+      borderMetrics.borderRadii.bottomRight.horizontal != 0 || borderMetrics.borderRadii.topLeft.vertical != 0 ||
+      borderMetrics.borderRadii.topRight.vertical != 0 || borderMetrics.borderRadii.bottomLeft.vertical != 0 ||
+      borderMetrics.borderRadii.bottomRight.vertical != 0;
+
+  const float scale = layoutMetrics.pointScaleFactor;
+  const float viewWidth = layoutMetrics.frame.size.width * scale;
+  const float viewHeight = layoutMetrics.frame.size.height * scale;
+
+  // Apply clipping to m_visual only for rounded corners
+  // overflow:hidden clipping is handled separately via m_childrenContainer in ViewComponentView
+  if (hasRoundedCorners) {
     winrt::com_ptr<ID2D1PathGeometry> pathGeometry = BorderPrimitive::GenerateRoundedRectPathGeometry(
-        m_compContext,
-        borderMetrics.borderRadii,
-        {0, 0, 0, 0},
-        {0,
-         0,
-         layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
-         layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+        m_compContext, borderMetrics.borderRadii, {0, 0, 0, 0}, {0, 0, viewWidth, viewHeight});
 
     Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
         pathGeometry.get());
+  } else {
+    Visual().as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(nullptr);
   }
 }
 
@@ -1164,6 +1091,11 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual
 ViewComponentView::VisualToMountChildrenInto() noexcept {
   if (m_builder && m_builder->VisualToMountChildrenIntoHandler())
     return m_builder->VisualToMountChildrenIntoHandler()(*this);
+  // When overflow:hidden, children are hosted in m_childrenContainer (child of m_visual)
+  // so we can apply clipping without affecting borders/background.
+  // Otherwise children go directly into Visual() (the original behavior).
+  if (m_childrenContainer)
+    return m_childrenContainer;
   return Visual();
 }
 
@@ -1172,9 +1104,14 @@ void ViewComponentView::MountChildComponentView(
     uint32_t index) noexcept {
   base_type::MountChildComponentView(childComponentView, index);
 
-  indexOffsetForBorder(index);
   ensureVisual();
 
+  // When children are in Visual() directly, offset past border visuals.
+  // When children are in m_childrenContainer, no offset needed.
+  if (!m_childrenContainer) {
+    indexOffsetForBorder(index);
+  }
+
   if (auto compositionChild = childComponentView.try_as<ComponentView>()) {
     auto visualIndex = index;
     // Most of the time child index will align with visual index.
@@ -1186,6 +1123,7 @@ void ViewComponentView::MountChildComponentView(
         }
       }
     }
+
     VisualToMountChildrenInto().InsertAt(compositionChild->OuterVisual(), visualIndex);
   } else {
     m_hasNonVisualChildren = true;
@@ -1197,7 +1135,6 @@ void ViewComponentView::UnmountChildComponentView(
     uint32_t index) noexcept {
   base_type::UnmountChildComponentView(childComponentView, index);
 
-  indexOffsetForBorder(index);
   if (auto compositionChild = childComponentView.try_as<ComponentView>()) {
     VisualToMountChildrenInto().Remove(compositionChild->OuterVisual());
   }
@@ -1397,6 +1334,57 @@ void ViewComponentView::updateLayoutMetrics(
   Visual().Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
+
+  // Update children container clipping for overflow:hidden
+  updateChildrenClippingPath(layoutMetrics, *viewProps());
+}
+
+void ViewComponentView::updateChildrenClippingPath(
+    facebook::react::LayoutMetrics const &layoutMetrics,
+    const facebook::react::ViewProps &viewProps) noexcept {
+  const float scale = layoutMetrics.pointScaleFactor;
+  const float viewWidth = layoutMetrics.frame.size.width * scale;
+  const float viewHeight = layoutMetrics.frame.size.height * scale;
+
+  if (viewProps.getClipsContentToBounds()) {
+    // Create m_childrenContainer on demand (like iOS _containerView pattern)
+    // m_childrenContainer is a child of m_visual, placed after border visuals.
+    if (!m_childrenContainer) {
+      m_childrenContainer = m_compContext.CreateSpriteVisual();
+
+      // Insert at the end of m_visual's children (after border visuals + existing children)
+      // Then move existing children from m_visual into m_childrenContainer
+      uint32_t borderCount = 0;
+      indexOffsetForBorder(borderCount);
+
+      // Move existing child visuals from m_visual to m_childrenContainer
+      uint32_t childVisualIndex = 0;
+      for (auto it = m_children.begin(); it != m_children.end(); ++it) {
+        if (auto compositionChild = (*it).try_as<ComponentView>()) {
+          Visual().Remove(compositionChild->OuterVisual());
+          m_childrenContainer.InsertAt(compositionChild->OuterVisual(), childVisualIndex++);
+        }
+      }
+
+      // Insert m_childrenContainer after border visuals in m_visual
+      Visual().InsertAt(m_childrenContainer, borderCount);
+
+      // Use relative sizing so container automatically tracks parent's size
+      m_childrenContainer.RelativeSizeWithOffset({0, 0}, {1, 1});
+    }
+
+    // Clip children to view bounds using outer border radii (matches iOS default behavior)
+    auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(layoutMetrics, viewProps);
+    winrt::com_ptr<ID2D1PathGeometry> pathGeometry = BorderPrimitive::GenerateRoundedRectPathGeometry(
+        m_compContext, borderMetrics.borderRadii, {0, 0, 0, 0}, {0, 0, viewWidth, viewHeight});
+
+    m_childrenContainer.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
+        pathGeometry.get());
+  } else if (m_childrenContainer) {
+    // overflow changed from hidden to visible. Keep container, just remove clip.
+    m_childrenContainer.as<::Microsoft::ReactNative::Composition::Experimental::IVisualInterop>()->SetClippingPath(
+        nullptr);
+  }
 }
 
 void ViewComponentView::prepareForRecycle() noexcept {}

package/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h

@@ -233,11 +233,15 @@ struct ViewComponentView : public ViewComponentViewT<
 
  protected:
   virtual winrt::Microsoft::ReactNative::ViewProps ViewPropsInner() noexcept;
+  virtual void updateChildrenClippingPath(
+      facebook::react::LayoutMetrics const &layoutMetrics,
+      const facebook::react::ViewProps &viewProps) noexcept;
 
  private:
   bool m_hasNonVisualChildren{false};
   facebook::react::SharedViewProps m_props;
   winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_childrenContainer{nullptr};
   winrt::Microsoft::ReactNative::Composition::Experimental::CreateInternalVisualDelegate m_createInternalVisualHandler{
       nullptr};
 };

package/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.cpp

@@ -15,6 +15,7 @@
 #include <winrt/Windows.UI.Composition.h>
 #include "CompositionContextHelper.h"
 #include "RootComponentView.h"
+#include "ScrollViewComponentView.h"
 
 #include "Composition.ContentIslandComponentView.g.cpp"
 
@@ -50,15 +51,31 @@ winrt::Microsoft::UI::Content::ContentIsland ContentIslandComponentView::ParentC
   return root->parentContentIsland();
 }
 
+winrt::Microsoft::UI::Content::ChildSiteLink ContentIslandComponentView::ChildSiteLink() noexcept {
+  if (!isMounted())
+    return nullptr;
+  if (!m_childSiteLink) {
+    m_childSiteLink = winrt::Microsoft::UI::Content::ChildSiteLink::Create(
+        m_parentContentIsland,
+        winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(Visual())
+            .as<winrt::Microsoft::UI::Composition::ContainerVisual>());
+  }
+  return m_childSiteLink;
+}
+
 void ContentIslandComponentView::ConnectInternal() noexcept {
   if (!m_islandToConnect)
     return;
 
-  m_childSiteLink = winrt::Microsoft::UI::Content::ChildSiteLink::Create(
-      m_parentContentIsland,
-      winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(Visual())
-          .as<winrt::Microsoft::UI::Composition::ContainerVisual>());
-  m_childSiteLink.ActualSize({m_layoutMetrics.frame.size.width, m_layoutMetrics.frame.size.height});
+  ChildSiteLink().ActualSize({m_layoutMetrics.frame.size.width, m_layoutMetrics.frame.size.height});
+
+  // Issue #15557: Set initial LocalToParentTransformMatrix synchronously before Connect.
+  // This fixes popup position being wrong even without scrolling.
+  // Note: getClientRect() returns physical pixels, but LocalToParentTransformMatrix expects DIPs.
+  auto clientRect = getClientRect();
+  float scaleFactor = m_layoutMetrics.pointScaleFactor;
+  m_childSiteLink.LocalToParentTransformMatrix(winrt::Windows::Foundation::Numerics::make_float4x4_translation(
+      static_cast<float>(clientRect.left) / scaleFactor, static_cast<float>(clientRect.top) / scaleFactor, 0.0f));
 
   m_navigationHost = winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteLink(m_childSiteLink);
 
@@ -76,10 +93,18 @@ void ContentIslandComponentView::ConnectInternal() noexcept {
   ConfigureChildSiteLinkAutomation();
 
   if (m_islandToConnect) {
+    Assert(m_childSiteLink.SiteView().IsConnected());
+    Assert(!m_islandToConnect.IsConnected());
+
     m_childSiteLink.Connect(m_islandToConnect);
     m_islandToConnect = nullptr;
   }
-  UnregisterForRootIslandEvents();
+
+  if (m_pendingNavigateFocus) {
+    m_navigationHost.NavigateFocus(
+        winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(*m_pendingNavigateFocus));
+    m_pendingNavigateFocus.reset();
+  }
 
   ParentLayoutChanged();
   auto view = Parent();
@@ -92,64 +117,65 @@ void ContentIslandComponentView::ConnectInternal() noexcept {
             strongThis->ParentLayoutChanged();
           }
         }));
-    view = view.Parent();
-  }
-}
-
-void ContentIslandComponentView::RegisterForRootIslandEvents() noexcept {
-  m_parentContentIsland = ParentContentIsland();
 
-  if (m_parentContentIsland.IsConnected()) {
-    ConnectInternal();
-  } else {
-    m_islandStateChangedToken = m_parentContentIsland.StateChanged(
-        [wkThis = get_weak()](
-            const winrt::Microsoft::UI::Content::ContentIsland & /*island*/,
-            const winrt::Microsoft::UI::Content::ContentIslandStateChangedEventArgs & /*args*/) {
-          if (auto strongThis = wkThis.get()) {
-            strongThis->ConnectInternal();
-          }
-        });
-  }
-}
+    // Issue #15557: Register for ViewChanged on parent ScrollViews to update transform
+    // when scroll position changes, ensuring correct XAML popup positioning.
+    if (auto scrollView = view.try_as<winrt::Microsoft::ReactNative::Composition::ScrollViewComponentView>()) {
+      auto token =
+          scrollView.ViewChanged([wkThis = get_weak()](const winrt::IInspectable &, const winrt::IInspectable &) {
+            if (auto strongThis = wkThis.get()) {
+              strongThis->ParentLayoutChanged();
+            }
+          });
+      m_viewChangedSubscriptions.push_back({scrollView, token});
+    }
 
-void ContentIslandComponentView::UnregisterForRootIslandEvents() noexcept {
-  if (m_islandStateChangedToken) {
-    m_parentContentIsland.StateChanged(m_islandStateChangedToken);
-    m_islandStateChangedToken = {};
-    m_parentContentIsland = nullptr;
+    view = view.Parent();
   }
 }
 
 void ContentIslandComponentView::OnMounted() noexcept {
-  RegisterForRootIslandEvents();
+  m_parentContentIsland = ParentContentIsland();
+  ConnectInternal();
 }
 
 void ContentIslandComponentView::OnUnmounted() noexcept {
   m_layoutMetricChangedRevokers.clear();
+
+  // Issue #15557: Unsubscribe from parent ScrollView events
+  for (auto &subscription : m_viewChangedSubscriptions) {
+    if (auto scrollView = subscription.scrollView.get()) {
+      scrollView.ViewChanged(subscription.token);
+    }
+  }
+  m_viewChangedSubscriptions.clear();
+
   if (m_navigationHostDepartFocusRequestedToken && m_navigationHost) {
     m_navigationHost.DepartFocusRequested(m_navigationHostDepartFocusRequestedToken);
     m_navigationHostDepartFocusRequestedToken = {};
   }
-  UnregisterForRootIslandEvents();
 }
 
 void ContentIslandComponentView::ParentLayoutChanged() noexcept {
-  if (m_layoutChangePosted)
-    return;
-
-  m_layoutChangePosted = true;
-  ReactContext().UIDispatcher().Post([wkThis = get_weak()]() {
-    if (auto strongThis = wkThis.get()) {
-      auto clientRect = strongThis->getClientRect();
-
-      strongThis->m_childSiteLink.LocalToParentTransformMatrix(
-          winrt::Windows::Foundation::Numerics::make_float4x4_translation(
-              static_cast<float>(clientRect.left), static_cast<float>(clientRect.top), 0.0f));
-
-      strongThis->m_layoutChangePosted = false;
-    }
-  });
+  // Issue #15557: Update transform synchronously to ensure correct popup position
+  // when user clicks. Async updates via UIDispatcher().Post() were causing the
+  // popup to open with stale transform values.
+  //
+  // Note: The original async approach was for batching notifications during layout passes.
+  // However, LocalToParentTransformMatrix is a cheap call (just sets a matrix), and
+  // synchronous updates are required to ensure correct popup position when clicked.
+  //
+  // getClientRect() returns values in physical pixels (scaled by pointScaleFactor),
+  // but LocalToParentTransformMatrix expects logical pixels (DIPs). We need to divide
+  // by the scale factor to convert.
+  auto clientRect = getClientRect();
+  float scaleFactor = m_layoutMetrics.pointScaleFactor;
+
+  float x = static_cast<float>(clientRect.left) / scaleFactor;
+  float y = static_cast<float>(clientRect.top) / scaleFactor;
+
+  m_childSiteLink.LocalToParentTransformMatrix(
+      winrt::Windows::Foundation::Numerics::make_float4x4_translation(x, y, 0.0f));
 }
 
 winrt::Windows::Foundation::IInspectable ContentIslandComponentView::CreateAutomationProvider() noexcept {
@@ -205,7 +231,10 @@ void ContentIslandComponentView::onGotFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
   auto gotFocusEventArgs = args.as<winrt::Microsoft::ReactNative::implementation::GotFocusEventArgs>();
   const auto navigationReason = GetFocusNavigationReason(gotFocusEventArgs->Direction());
-  m_navigationHost.NavigateFocus(winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(navigationReason));
+  if (m_navigationHost)
+    m_navigationHost.NavigateFocus(winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(navigationReason));
+  else
+    m_pendingNavigateFocus = navigationReason;
 }
 
 ContentIslandComponentView::~ContentIslandComponentView() noexcept {
@@ -264,6 +293,9 @@ void ContentIslandComponentView::Connect(const winrt::Microsoft::UI::Content::Co
     m_childSiteLink.Connect(contentIsland);
   } else {
     m_islandToConnect = contentIsland;
+    if (isMounted()) {
+      ConnectInternal();
+    }
   }
 }