[0.74] Focus and Arrange cherry pick (#14367)

* Fix issue when calling arrange on an RN Island during load * Fix stale focus rects left in UI when last focusable component is removed * Change files
microsoft · Feb 25, 2025 · a31e698 · a31e698
1 parent 5e33984
commit a31e698
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 6 deletions.
diff --git a/change/react-native-windows-f2b5ffe0-c976-4f9e-820f-527bdbcf4f7a.json b/change/react-native-windows-f2b5ffe0-c976-4f9e-820f-527bdbcf4f7a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix issue when calling arrange on an RN Island during load",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/ComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/ComponentView.cpp
@@ -279,7 +279,10 @@ void ComponentView::parent(const winrt::Microsoft::ReactNative::ComponentView &p
     m_parent = parent;
     if (!parent) {
       if (oldRootView && oldRootView->GetFocusedComponent() == *this) {
-        oldRootView->TrySetFocusedComponent(oldParent, winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+        oldRootView->TrySetFocusedComponent(
+            oldParent,
+            winrt::Microsoft::ReactNative::FocusNavigationDirection::None,
+            true /*forceNoSelectionIfCannotMove*/);
       }
     }
     if (parent) {

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.cpp
@@ -771,7 +771,7 @@ winrt::Windows::Foundation::Size ReactNativeIsland::Measure(
   facebook::react::LayoutConstraints constraints;
   ApplyConstraints(layoutConstraints, constraints);
 
-  if (m_isInitialized && m_rootTag != -1) {
+  if (m_isInitialized && m_rootTag != -1 && m_hasRenderedVisual) {
     if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
             winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()))) {
       facebook::react::LayoutContext context;
@@ -802,7 +802,7 @@ void ReactNativeIsland::Arrange(
   facebook::react::LayoutConstraints fbLayoutConstraints;
   ApplyConstraints(layoutConstraints, fbLayoutConstraints);
 
-  if (m_isInitialized && m_rootTag != -1 && !m_isFragment) {
+  if (m_isInitialized && m_rootTag != -1 && !m_isFragment && m_hasRenderedVisual) {
     if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
             winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()))) {
       facebook::react::LayoutContext context;

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.cpp
@@ -120,15 +120,16 @@ bool RootComponentView::NavigateFocus(const winrt::Microsoft::ReactNative::Focus
 
 bool RootComponentView::TrySetFocusedComponent(
     const winrt::Microsoft::ReactNative::ComponentView &view,
-    winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept {
+    winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
+    bool forceNoSelectionIfCannotMove /*= false*/) noexcept {
   auto target = view;
   auto selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(target);
   if (selfView && !selfView->focusable()) {
     target = (direction == winrt::Microsoft::ReactNative::FocusNavigationDirection::Last ||
               direction == winrt::Microsoft::ReactNative::FocusNavigationDirection::Previous)
         ? FocusManager::FindLastFocusableElement(target)
         : FocusManager::FindFirstFocusableElement(target);
-    if (!target)
+    if (!target && !forceNoSelectionIfCannotMove)
       return false;
     selfView = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(target);
   }
@@ -154,6 +155,8 @@ bool RootComponentView::TrySetFocusedComponent(
     winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(losingFocusArgs.NewFocusedComponent())
         ->rootComponentView()
         ->SetFocusedComponent(gettingFocusArgs.NewFocusedComponent(), direction);
+  } else {
+    SetFocusedComponent(nullptr, direction);
   }
 
   return true;

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.h
@@ -32,7 +32,8 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
       winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept;
   bool TrySetFocusedComponent(
       const winrt::Microsoft::ReactNative::ComponentView &view,
-      winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept;
+      winrt::Microsoft::ReactNative::FocusNavigationDirection direction,
+      bool forceNoSelectionIfCannotMove = false) noexcept;
 
   bool NavigateFocus(const winrt::Microsoft::ReactNative::FocusNavigationRequest &request) noexcept;