Add root tag to ShadowNode for resolving correct XamlRoot in FlyoutViewManager

change/react-native-windows-2c2723ef-9489-4c71-b544-b6bb24e74a32.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add root tag to CreateView in ViewManagerBase",
+  "packageName": "react-native-windows",
+  "email": "erozell@outlook.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Modules/NativeUIManager.cpp

@@ -101,15 +101,25 @@ winrt::XamlRoot NativeUIManager::tryGetXamlRoot() {
     for (auto const tag : m_host->GetAllRootTags()) {
       if (auto shadowNode = static_cast<ShadowNodeBase *>(m_host->FindShadowNodeForTag(tag))) {
         if (auto uiElement10 = shadowNode->GetView().try_as<xaml::IUIElement10>()) {
-          if (auto xamlRoot = uiElement10.XamlRoot())
-            return xamlRoot;
+          return uiElement10.XamlRoot();
         }
       }
     }
   }
   return nullptr;
 }
 
+winrt::XamlRoot NativeUIManager::tryGetXamlRoot(int64_t rootTag) {
+  if (m_host) {
+    if (auto shadowNode = static_cast<ShadowNodeBase *>(m_host->FindShadowNodeForTag(rootTag))) {
+      if (auto uiElement10 = shadowNode->GetView().try_as<xaml::IUIElement10>()) {
+        return uiElement10.XamlRoot();
+      }
+    }
+  }
+  return nullptr;
+}
+
 XamlView NativeUIManager::reactPeerOrContainerFrom(xaml::FrameworkElement fe) {
   if (m_host) {
     while (fe) {

vnext/Microsoft.ReactNative/Modules/NativeUIManager.h

@@ -88,6 +88,11 @@ class NativeUIManager final : public INativeUIManager {
   // and try to get a valid XamlRoot.
   xaml::XamlRoot tryGetXamlRoot();
 
+  // For unparented node like Flyout, XamlRoot should be set to handle
+  // XamlIsland/AppWindow scenarios. This function retrieves the XamlRoot for a
+  // specific root tag.
+  xaml::XamlRoot tryGetXamlRoot(int64_t rootTag);
+
   // Searches itself and its parent to get a valid XamlView.
   // Like Mouse/Keyboard, the event source may not have matched XamlView.
   XamlView reactPeerOrContainerFrom(xaml::FrameworkElement fe);

vnext/Microsoft.ReactNative/Modules/PaperUIManagerModule.cpp

@@ -130,6 +130,7 @@ class UIManagerModule : public std::enable_shared_from_this<UIManagerModule>, pu
     auto node = viewManager->createShadow();
     node->m_className = std::move(viewName);
     node->m_tag = reactTag;
+    node->m_rootTag = rootTag;
     node->m_viewManager = viewManager;
 
     node->createView(props);
@@ -471,6 +472,7 @@ class UIManagerModule : public std::enable_shared_from_this<UIManagerModule>, pu
     root->m_className = rootClassName;
     root->m_viewManager = viewManager;
     root->m_tag = rootViewTag;
+    root->m_rootTag = rootViewTag;
     m_nodeRegistry.addRootView(shadow_ptr(root), rootViewTag);
 
     m_nativeUIManager->AddRootView(*root, rootView);

vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp

@@ -234,7 +234,7 @@ void FlyoutShadowNode::createView(const winrt::Microsoft::ReactNative::JSValueOb
   // Set XamlRoot on the Flyout to handle XamlIsland/AppWindow scenarios.
   if (auto flyoutBase6 = m_flyout.try_as<winrt::IFlyoutBase6>()) {
     if (auto uiManager = GetNativeUIManager(GetViewManager()->GetReactContext()).lock()) {
-      if (auto xamlRoot = uiManager->tryGetXamlRoot()) {
+      if (auto xamlRoot = uiManager->tryGetXamlRoot(m_rootTag)) {
         flyoutBase6.XamlRoot(xamlRoot);
         m_xamlRootChangedRevoker = xamlRoot.Changed(winrt::auto_revoke, [this](auto &&, auto &&) {
           if (m_isLightDismissEnabled) {

vnext/Microsoft.ReactNative/Views/PaperShadowNode.h

@@ -27,6 +27,7 @@ struct ShadowNode {
   virtual void createView(const winrt::Microsoft::ReactNative::JSValueObject &props) = 0;
 
   int64_t m_tag{0};
+  int64_t m_rootTag{0};
   std::string m_className;
   std::vector<int64_t> m_children;
   int64_t m_parent = -1;