Adds autoFocus prop to FlyoutViewManager (microsoft#8417)

* Adds autoFocus prop to FlyoutViewManager Adds option to auto-focus the first focusable element in the Flyout via the `autoFocus` prop. Co-authored-by: Mykola Lando <[email protected]> * Change files Co-authored-by: Mykola Lando <[email protected]> Co-authored-by: Andrew Coates <[email protected]>
chrisglein · Sep 22, 2021 · 1671258 · 1671258
1 parent 032901d
commit 1671258
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/change/react-native-windows-1a06e03d-bd24-4826-a7ce-4d17bb002859.json b/change/react-native-windows-1a06e03d-bd24-4826-a7ce-4d17bb002859.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds autoFocus prop to FlyoutViewManager",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp b/vnext/Microsoft.ReactNative/Views/FlyoutViewManager.cpp
@@ -131,6 +131,7 @@ class FlyoutShadowNode : public ShadowNodeBase {
   float m_verticalOffset = 0;
   bool m_isFlyoutShowOptionsSupported = false;
   winrt::FlyoutShowOptions m_showOptions = nullptr;
+  bool m_autoFocus = false;
 
   std::unique_ptr<TouchEventHandler> m_touchEventHanadler;
   std::unique_ptr<PreviewKeyboardEventHandlerOnRoot> m_previewKeyboardEventHandlerOnRoot;
@@ -229,6 +230,17 @@ void FlyoutShadowNode::createView(const winrt::Microsoft::ReactNative::JSValueOb
           }
         }
 
+        if (m_autoFocus) {
+          if (const auto content = m_flyout.Content()) {
+            if (const auto elementToFocus = xaml::Input::FocusManager::FindFirstFocusableElement(content)) {
+              if (const auto uiManager = GetNativeUIManager(GetViewManager()->GetReactContext()).lock()) {
+                // NativeUIManager::focus is a no-op if the tag is not found
+                uiManager->focus(GetTag(elementToFocus));
+              }
+            }
+          }
+        }
+
         flyoutPresenter.AllowFocusOnInteraction(false);
       }
     }
@@ -346,6 +358,8 @@ void FlyoutShadowNode::updateProperties(winrt::Microsoft::ReactNative::JSValueOb
       }
 
       m_flyout.LightDismissOverlayMode(overlayMode);
+    } else if (propertyName == "autoFocus") {
+      m_autoFocus = propertyValue.AsBoolean();
     } else if (propertyName == "showMode") {
       const auto showMode = json_type_traits<winrt::FlyoutShowMode>::parseJson(propertyValue);
       m_flyout.ShowMode(showMode);
@@ -481,6 +495,7 @@ void FlyoutViewManager::GetNativeProps(const winrt::Microsoft::ReactNative::IJSV
   React::WriteProperty(writer, L"target", L"number");
   React::WriteProperty(writer, L"verticalOffset", L"number");
   React::WriteProperty(writer, L"isOverlayEnabled", L"boolean");
+  React::WriteProperty(writer, L"autoFocus", L"boolean");
   React::WriteProperty(writer, L"showMode", L"string");
   React::WriteProperty(writer, L"shouldConstrainToRootBounds", L"boolean");
 }

diff --git a/vnext/src/Libraries/Components/Flyout/FlyoutProps.ts b/vnext/src/Libraries/Components/Flyout/FlyoutProps.ts
@@ -30,6 +30,7 @@ export type ShowMode =
 export interface IFlyoutProps extends ViewProps {
   horizontalOffset?: number;
   isLightDismissEnabled?: boolean;
+  autoFocus?: boolean;
   shouldConstrainToRootBounds?: boolean;
 
   /**