Fix issue when creating a ContentIslandComponentView when the root ReactNativeIsland is not connected (#15649)

* Fix issue when creating a ContentIslandComponentView when the root ReactNativeIsland is not connected

* Change files

* Unregister from state changed events after we have used it to connect

Author: acoates-ms

change/react-native-windows-b74972ac-3ce7-4596-b61b-2b7fc31ac233.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix issue when creating a ContentIslandComponentView when the root ReactNativeIsland is not connected",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -42,9 +42,19 @@ ContentIslandComponentView::ContentIslandComponentView(
       });
 }
 
-void ContentIslandComponentView::OnMounted() noexcept {
+winrt::Microsoft::UI::Content::ContentIsland ContentIslandComponentView::ParentContentIsland() noexcept {
+  auto root = rootComponentView();
+  if (!root)
+    return nullptr;
+  return root->parentContentIsland();
+}
+
+void ContentIslandComponentView::ConnectInternal() noexcept {
+  if (!m_islandToConnect)
+    return;
+
   m_childSiteLink = winrt::Microsoft::UI::Content::ChildSiteLink::Create(
-      rootComponentView()->parentContentIsland(),
+      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});
@@ -68,6 +78,7 @@ void ContentIslandComponentView::OnMounted() noexcept {
     m_childSiteLink.Connect(m_islandToConnect);
     m_islandToConnect = nullptr;
   }
+  UnregisterForRootIslandEvents();
 
   ParentLayoutChanged();
   auto view = Parent();
@@ -84,12 +95,42 @@ void ContentIslandComponentView::OnMounted() noexcept {
   }
 }
 
+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();
+          }
+        });
+  }
+}
+
+void ContentIslandComponentView::UnregisterForRootIslandEvents() noexcept {
+  if (m_islandStateChangedToken) {
+    m_parentContentIsland.StateChanged(m_islandStateChangedToken);
+    m_islandStateChangedToken = {};
+    m_parentContentIsland = nullptr;
+  }
+}
+
+void ContentIslandComponentView::OnMounted() noexcept {
+  RegisterForRootIslandEvents();
+}
+
 void ContentIslandComponentView::OnUnmounted() noexcept {
   m_layoutMetricChangedRevokers.clear();
   if (m_navigationHostDepartFocusRequestedToken && m_navigationHost) {
     m_navigationHost.DepartFocusRequested(m_navigationHostDepartFocusRequestedToken);
     m_navigationHostDepartFocusRequestedToken = {};
   }
+  UnregisterForRootIslandEvents();
 }
 
 void ContentIslandComponentView::ParentLayoutChanged() noexcept {

vnext/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.h

@@ -58,9 +58,16 @@ struct ContentIslandComponentView : ContentIslandComponentViewT<ContentIslandCom
   void OnMounted() noexcept;
   void OnUnmounted() noexcept;
   void ParentLayoutChanged() noexcept;
+  void ConnectInternal() noexcept;
+  void RegisterForRootIslandEvents() noexcept;
+  void UnregisterForRootIslandEvents() noexcept;
+  winrt::Microsoft::UI::Content::ContentIsland ParentContentIsland() noexcept;
 
   bool m_layoutChangePosted{false};
+  winrt::Microsoft::UI::Content::ContentIsland m_parentContentIsland{nullptr};
   winrt::Microsoft::UI::Content::ContentIsland m_islandToConnect{nullptr};
+  winrt::event_token m_islandStateChangedToken;
+
   winrt::event_token m_mountedToken;
   winrt::event_token m_unmountedToken;
   std::vector<winrt::Microsoft::ReactNative::ComponentView::LayoutMetricsChanged_revoker> m_layoutMetricChangedRevokers;