[Fabric] Implement onFocus and onBlur

change/react-native-windows-0d249a84-b206-4efd-bdcb-1888c83a3b3d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Implement onFocus and onBlur",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -12,6 +12,7 @@
 #include <winrt/Windows.UI.Composition.h>
 #include "CompositionContextHelper.h"
 #include "CompositionHelpers.h"
+#include "RootComponentView.h"
 #include "d2d1helper.h"
 
 namespace Microsoft::ReactNative {
@@ -38,6 +39,13 @@ const std::vector<IComponentView *> &CompositionBaseComponentView::children() co
 }
 
 void CompositionBaseComponentView::parent(IComponentView *parent) noexcept {
+  if (!parent) {
+    auto root = rootComponentView();
+    if (root->GetFocusedComponent() == this) {
+      root->SetFocusedComponent(nullptr); // TODO need move focus logic - where should focus go?
+    }
+  }
+
   m_parent = parent;
 }
 
@@ -60,9 +68,13 @@ bool CompositionBaseComponentView::runOnChildren(bool forward, Mso::Functor<bool
   return false;
 }
 
-void CompositionBaseComponentView::onFocusLost() noexcept {}
+void CompositionBaseComponentView::onFocusLost() noexcept {
+  m_eventEmitter->onBlur();
+}
 
-void CompositionBaseComponentView::onFocusGained() noexcept {}
+void CompositionBaseComponentView::onFocusGained() noexcept {
+  m_eventEmitter->onFocus();
+}
 
 void CompositionBaseComponentView::updateEventEmitter(
     facebook::react::EventEmitter::Shared const &eventEmitter) noexcept {
@@ -971,9 +983,8 @@ void CompositionBaseComponentView::updateBorderLayoutMetrics(
     Visual().as<Composition::IVisualInterop>()->SetClippingPath(pathGeometry.get());
   }
 
-  if (m_needsBorderUpdate || m_layoutMetrics != layoutMetrics) {
-    m_needsBorderUpdate = false;
-    UpdateSpecialBorderLayers(layoutMetrics, viewProps);
+  if (m_layoutMetrics != layoutMetrics) {
+    m_needsBorderUpdate = true;
   }
 }
 
@@ -1219,7 +1230,12 @@ void CompositionViewComponentView::updateLayoutMetrics(
   });
 }
 
-void CompositionViewComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {}
+void CompositionViewComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
+  if (m_needsBorderUpdate) {
+    m_needsBorderUpdate = false;
+    UpdateSpecialBorderLayers(m_layoutMetrics, *m_props);
+  }
+}
 
 void CompositionViewComponentView::prepareForRecycle() noexcept {}
 facebook::react::Props::Shared CompositionViewComponentView::props() noexcept {

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -558,14 +558,6 @@ WindowsTextInputComponentView::supplementalComponentDescriptorProviders() noexce
   return {};
 }
 
-void WindowsTextInputComponentView::parent(IComponentView *parent) noexcept {
-  if (!parent && rootComponentView()->GetFocusedComponent() == this) {
-    rootComponentView()->SetFocusedComponent(nullptr); // TODO need move focus logic - where should focus go?
-  }
-
-  Super::parent(parent);
-}
-
 void WindowsTextInputComponentView::mountChildComponentView(
     IComponentView &childComponentView,
     uint32_t index) noexcept {

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h

@@ -46,7 +46,6 @@ struct WindowsTextInputComponentView : CompositionBaseComponentView {
   void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept override;
   int64_t sendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept override;
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt) const noexcept override;
-  void parent(IComponentView *parent) noexcept override;
   void OnRenderingDeviceLost() noexcept override;
   winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
   void onFocusLost() noexcept override;

vnext/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/components/view/ViewEventEmitter.cpp

@@ -0,0 +1,127 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "ViewEventEmitter.h"
+
+namespace facebook::react {
+
+#pragma mark - Accessibility
+
+void ViewEventEmitter::onAccessibilityAction(std::string const &name) const {
+  dispatchEvent("accessibilityAction", [name](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "actionName", name);
+    return payload;
+  });
+}
+
+void ViewEventEmitter::onAccessibilityTap() const {
+  dispatchEvent("accessibilityTap");
+}
+
+void ViewEventEmitter::onAccessibilityMagicTap() const {
+  dispatchEvent("magicTap");
+}
+
+void ViewEventEmitter::onAccessibilityEscape() const {
+  dispatchEvent("accessibilityEscape");
+}
+
+#pragma mark - Layout
+
+void ViewEventEmitter::onLayout(const LayoutMetrics &layoutMetrics) const {
+  // A copy of a shared pointer (`layoutEventState_`) establishes shared
+  // ownership that will be captured by lambda.
+  auto layoutEventState = layoutEventState_;
+
+  // Dispatched `frame` values to JavaScript thread are throttled here.
+  // Basic ideas:
+  //  - Scheduling a lambda with some value that already was dispatched, does
+  //    nothing.
+  //  - If some lambda is already in flight, we don't schedule another;
+  //  - When a lambda is being executed on the JavaScript thread, the *most
+  //    recent* `frame` value is used (not the value that was current at the
+  //    moment of scheduling the lambda).
+  //
+  // This implies the following caveats:
+  //  - Some events can be skipped;
+  //  - When values change rapidly, even events with different values
+  //    can be skipped (only the very last will be delivered).
+  //  - Ordering is preserved.
+
+  {
+    std::lock_guard<std::mutex> guard(layoutEventState->mutex);
+
+    // If a *particular* `frame` was already dispatched to the JavaScript side,
+    // no other work is required.
+    if (layoutEventState->frame == layoutMetrics.frame &&
+        layoutEventState->wasDispatched) {
+      return;
+    }
+
+    // If the *particular* `frame` was not already dispatched *or*
+    // some *other* `frame` was dispatched before,
+    // we need to schedule the dispatching.
+    layoutEventState->wasDispatched = false;
+    layoutEventState->frame = layoutMetrics.frame;
+
+    // Something is already in flight, dispatching another event is not
+    // required.
+    if (layoutEventState->isDispatching) {
+      return;
+    }
+
+    layoutEventState->isDispatching = true;
+  }
+
+  dispatchEvent(
+      "layout",
+      [layoutEventState](jsi::Runtime &runtime) {
+        auto frame = Rect{};
+
+        {
+          std::lock_guard<std::mutex> guard(layoutEventState->mutex);
+
+          layoutEventState->isDispatching = false;
+
+          // If some *particular* `frame` was already dispatched before,
+          // and since then there were no other new values of the `frame`
+          // observed, do nothing.
+          if (layoutEventState->wasDispatched) {
+            return jsi::Value::null();
+          }
+
+          frame = layoutEventState->frame;
+
+          // If some *particular* `frame` was *not* already dispatched before,
+          // it's time to dispatch it and mark as dispatched.
+          layoutEventState->wasDispatched = true;
+        }
+
+        auto layout = jsi::Object(runtime);
+        layout.setProperty(runtime, "x", frame.origin.x);
+        layout.setProperty(runtime, "y", frame.origin.y);
+        layout.setProperty(runtime, "width", frame.size.width);
+        layout.setProperty(runtime, "height", frame.size.height);
+        auto payload = jsi::Object(runtime);
+        payload.setProperty(runtime, "layout", std::move(layout));
+        return jsi::Value(std::move(payload));
+      },
+      EventPriority::AsynchronousUnbatched);
+}
+
+// [Windows]
+void ViewEventEmitter::onFocus() const {
+  dispatchEvent("focus");
+}
+
+// [Windows]
+void ViewEventEmitter::onBlur() const {
+  dispatchEvent("blur");
+}
+
+} // namespace facebook::react

vnext/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/components/view/ViewEventEmitter.h

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <memory>
+#include <mutex>
+
+#include <react/renderer/core/LayoutMetrics.h>
+#include <react/renderer/core/ReactPrimitives.h>
+
+#include "TouchEventEmitter.h"
+
+namespace facebook {
+namespace react {
+
+struct FocusEvent {
+  int target;
+};
+
+class ViewEventEmitter;
+
+using SharedViewEventEmitter = std::shared_ptr<const ViewEventEmitter>;
+
+class ViewEventEmitter : public TouchEventEmitter {
+ public:
+  using TouchEventEmitter::TouchEventEmitter;
+
+#pragma mark - Accessibility
+
+  void onAccessibilityAction(std::string const &name) const;
+  void onAccessibilityTap() const;
+  void onAccessibilityMagicTap() const;
+  void onAccessibilityEscape() const;
+
+#pragma mark - Layout
+
+  void onLayout(const LayoutMetrics &layoutMetrics) const;
+
+#pragma mark - NativeHostPlatform
+
+  void onFocus() const; // [Windows]
+  void onBlur() const; // [Windows]
+
+ private:
+  /*
+   * Contains the most recent `frame` and a `mutex` protecting access to it.
+   */
+  struct LayoutEventState {
+    /*
+     * Protects an access to other fields of the struct.
+     */
+    std::mutex mutex;
+
+    /*
+     * Last dispatched `frame` value or value that's being dispatched right now.
+     */
+    Rect frame{};
+
+    /*
+     * Indicates that the `frame` value was already dispatched (and dispatching
+     * of the *same* value is not needed).
+     */
+    bool wasDispatched{false};
+
+    /*
+     * Indicates that some lambda is already being dispatching (and dispatching
+     * another one is not needed).
+     */
+    bool isDispatching{false};
+  };
+
+  mutable std::shared_ptr<LayoutEventState> layoutEventState_{
+      std::make_shared<LayoutEventState>()};
+};
+
+} // namespace react
+} // namespace facebook

vnext/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/components/view/ViewProps.cpp

@@ -283,6 +283,19 @@ ViewProps::ViewProps(
     return;                                             \
   }
 
+// [Windows]
+#define HOST_PLATFORM_VIEW_EVENT_CASE(eventType)                      \
+  case CONSTEXPR_RAW_PROPS_KEY_HASH("on" #eventType): { \
+    const auto offset = HostPlatformViewEvents::Offset::eventType;  \
+    HostPlatformViewEvents defaultViewEvents{};                     \
+    bool res = defaultViewEvents[offset];               \
+    if (value.hasValue()) {                             \
+      fromRawValue(context, value, res);                \
+    }                                                   \
+    platformEvents[offset] = res;                               \
+    return;                                             \
+  }
+
 void ViewProps::setProp(
     const PropsParserContext &context,
     RawPropsPropNameHash hash,
@@ -339,6 +352,8 @@ void ViewProps::setProp(
     VIEW_EVENT_CASE(TouchCancel);
     VIEW_EVENT_CASE(MouseEnter); // [Windows]
     VIEW_EVENT_CASE(MouseLeave); // [Windows]
+    HOST_PLATFORM_VIEW_EVENT_CASE(Focus); // [Windows]
+    HOST_PLATFORM_VIEW_EVENT_CASE(Blur); // [Windows]
 
 #ifdef ANDROID
     RAW_SET_PROP_SWITCH_CASE_BASIC(elevation, {});

vnext/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/components/view/ViewProps.h

@@ -77,6 +77,8 @@ class ViewProps : public YogaStylableProps, public AccessibilityProps {
 
   ViewEvents events{};
 
+  HostPlatformViewEvents platformEvents{}; // [Windows]
+
   bool collapsable{true};
 
   bool removeClippedSubviews{false};

vnext/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/components/view/ViewShadowNode.cpp

@@ -56,6 +56,8 @@ void ViewShadowNode::initialize() noexcept {
       viewProps.importantForAccessibility != ImportantForAccessibility::Auto ||
       viewProps.removeClippedSubviews;
 
+  formsStackingContext = formsStackingContext || viewProps.platformEvents.bits.any(); // [Windows]
+
 #ifdef ANDROID
   formsStackingContext = formsStackingContext || viewProps.elevation != 0;
 #endif

vnext/ReactCommon/TEMP_UntilReactCommonUpdate/react/renderer/components/view/primitives.h

@@ -82,6 +82,33 @@ inline static bool operator!=(ViewEvents const &lhs, ViewEvents const &rhs) {
   return lhs.bits != rhs.bits;
 }
 
+// [Windows]
+struct HostPlatformViewEvents {
+  std::bitset<32> bits{};
+
+  enum class Offset : std::size_t {
+    Focus = 0,
+    Blur = 1,
+  };
+
+  constexpr bool operator[](const Offset offset) const {
+    return bits[static_cast<std::size_t>(offset)];
+  }
+
+  std::bitset<32>::reference operator[](const Offset offset) {
+    return bits[static_cast<std::size_t>(offset)];
+  }
+  };
+
+
+inline static bool operator==(HostPlatformViewEvents const &lhs, HostPlatformViewEvents const &rhs) {
+  return lhs.bits == rhs.bits;
+}
+
+inline static bool operator!=(HostPlatformViewEvents const &lhs, HostPlatformViewEvents const &rhs) {
+  return lhs.bits != rhs.bits;
+}
+
 enum class BackfaceVisibility : uint8_t { Auto, Visible, Hidden };
 
 enum class BorderCurve : uint8_t { Circular, Continuous };