Fix stale focus rects left in UI when last focusable component is rem…

…oved (#14359) * Fix stale focus rects left in UI when last focusable component is removed * Change files --------- Co-authored-by: Tatiana Kapos <[email protected]>
microsoft · Feb 27, 2025 · c8de27f · c8de27f
1 parent c5ee2c2
commit c8de27f
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/change/react-native-windows-c084ae94-ee07-44f4-9f06-077f17355ea0.json b/change/react-native-windows-c084ae94-ee07-44f4-9f06-077f17355ea0.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix stale focus rects left in UI when last focusable component is removed",
+  "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/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;