feat(fabric)!: Implement keyboard event handling on View (#2699)

Author: Saadnajmi

packages/react-native/Libraries/Components/View/View.js

@@ -53,10 +53,6 @@ const View: component(
       importantForAccessibility,
       nativeID,
       tabIndex,
-      // [macOS
-      keyDownEvents,
-      keyUpEvents,
-      // macOS]
       ...otherProps
     }: ViewProps,
     forwardedRef,

packages/react-native/Libraries/NativeComponent/BaseViewConfig.macos.js

@@ -18,6 +18,18 @@ import {ConditionallyIgnoredEventHandlers} from './ViewConfigIgnore';
 
 const bubblingEventTypes = {
   ...PlatformBaseViewConfigIos.bubblingEventTypes,
+  topKeyDown: {
+    phasedRegistrationNames: {
+      captured: 'onKeyDownCapture',
+      bubbled: 'onKeyDown',
+    },
+  },
+  topKeyUp: {
+    phasedRegistrationNames: {
+      captured: 'onKeyUpCapture',
+      bubbled: 'onKeyUp',
+    },
+  },
 };
 
 const directEventTypes = {
@@ -31,12 +43,6 @@ const directEventTypes = {
   topDrop: {
     registrationName: 'onDrop',
   },
-  topKeyUp: {
-    registrationName: 'onKeyUp',
-  },
-  topKeyDown: {
-    registrationName: 'onKeyDown',
-  },
   topMouseEnter: {
     registrationName: 'onMouseEnter',
   },

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -16,7 +16,6 @@
 #import <React/RCTBorderDrawing.h>
 #import <React/RCTBoxShadow.h>
 #import <React/RCTConversions.h>
-#import <React/RCTCursor.h> // [macOS]
 #import <React/RCTLinearGradient.h>
 #import <React/RCTLocalizedString.h>
 #import <react/featureflags/ReactNativeFeatureFlags.h>
@@ -30,6 +29,11 @@
 #import <React/RCTComponentViewFactory.h>
 #endif
 
+#if TARGET_OS_OSX // [macOS
+#import <React/RCTCursor.h>
+#import <React/RCTViewKeyboardEvent.h>
+#endif // macOS]
+
 using namespace facebook::react;
 
 const CGFloat BACKGROUND_COLOR_ZPOSITION = -1024.0f;
@@ -1597,7 +1601,61 @@ -  (BOOL)resignFirstResponder
 
   return YES;
 }
-  
+
+#pragma mark - Keyboard Events
+
+- (BOOL)handleKeyboardEvent:(NSEvent *)event {
+  RCTAssert(
+    event.type == NSEventTypeKeyDown || event.type == NSEventTypeKeyUp,
+    @"Keyboard event must be keyDown, keyUp. Got type: %ld", (long)event.type);
+
+  // Convert the event to a KeyEvent
+  NSEventModifierFlags modifierFlags = event.modifierFlags;
+  facebook::react::KeyEvent keyEvent = {
+    .key = [[RCTViewKeyboardEvent keyFromEvent:event] UTF8String],
+    .altKey = static_cast<bool>(modifierFlags & NSEventModifierFlagOption),
+    .ctrlKey = static_cast<bool>(modifierFlags & NSEventModifierFlagControl),
+    .shiftKey = static_cast<bool>(modifierFlags & NSEventModifierFlagShift),
+    .metaKey = static_cast<bool>(modifierFlags & NSEventModifierFlagCommand),
+    .capsLockKey = static_cast<bool>(modifierFlags & NSEventModifierFlagCapsLock),
+    .numericPadKey = static_cast<bool>(modifierFlags & NSEventModifierFlagNumericPad),
+    .helpKey = static_cast<bool>(modifierFlags & NSEventModifierFlagHelp),
+    .functionKey = static_cast<bool>(modifierFlags & NSEventModifierFlagFunction),
+  };
+
+  // Emit the event to JS only once. By default, events, will bubble up the respnder chain
+  // when we call super, so let's emit the event only at the first responder. It would be
+  // simpler to check `if (self == self.window.firstResponder), however, that does not account
+  // for cases like TextInputComponentView, where the first responder may be a subview.
+  static const char kRCTViewKeyboardEventEmittedKey = 0;
+  NSNumber *emitted = objc_getAssociatedObject(event, &kRCTViewKeyboardEventEmittedKey);
+  BOOL alreadyEmitted = [emitted boolValue];
+  if (!alreadyEmitted) {
+    if (event.type == NSEventTypeKeyDown) {
+      _eventEmitter->onKeyDown(keyEvent);
+    } else {
+      _eventEmitter->onKeyUp(keyEvent);
+    }
+    objc_setAssociatedObject(event, &kRCTViewKeyboardEventEmittedKey, @(YES), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
+  }
+
+  // If keyDownEvents or keyUpEvents specifies the event, block native handling of the event
+  auto const& handledKeyEvents = event.type == NSEventTypeKeyDown ? _props->keyDownEvents : _props->keyUpEvents;
+  return std::find(handledKeyEvents.cbegin(), handledKeyEvents.cend(), keyEvent) != handledKeyEvents.cend();
+}
+
+- (void)keyDown:(NSEvent *)event {
+  if (![self handleKeyboardEvent:event]) {
+    [super keyDown:event];
+  }
+}
+
+- (void)keyUp:(NSEvent *)event {
+  if (![self handleKeyboardEvent:event]) {
+    [super keyUp:event];
+  }
+}
+
 #endif // macOS]
 
 - (SharedTouchEventEmitter)touchEventEmitterAtPoint:(CGPoint)point

packages/react-native/React/Views/RCTView.h

@@ -173,8 +173,8 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 // NOTE does not properly work with single line text inputs (most key downs). This is because those are
 // presumably handled by the window's field editor. To make it work, we'd need to look into providing
 // a custom field editor for NSTextField controls.
-@property (nonatomic, copy) RCTDirectEventBlock onKeyDown;
-@property (nonatomic, copy) RCTDirectEventBlock onKeyUp;
+@property (nonatomic, copy) RCTBubblingEventBlock onKeyDown;
+@property (nonatomic, copy) RCTBubblingEventBlock onKeyUp;
 @property (nonatomic, copy) NSArray<RCTHandledKey*> *keyDownEvents;
 @property (nonatomic, copy) NSArray<RCTHandledKey*> *keyUpEvents;
 

packages/react-native/React/Views/RCTView.m

@@ -1578,63 +1578,31 @@ - (BOOL)performDragOperation:(id <NSDraggingInfo>)sender
 
 #pragma mark - Keyboard Events
 
-// This dictionary is attached to the NSEvent being handled so we can ensure we only dispatch it
-// once per RCTView\nativeTag. The reason we need to track this state is that certain React native
-// views such as RCTUITextView inherit from views (such as NSTextView) which may or may not
-// decide to bubble the event to the next responder, and we don't want to dispatch the same
-// event more than once (e.g. first from RCTUITextView, and then from it's parent RCTView).
-NSMutableDictionary<NSNumber *, NSNumber *> *GetEventDispatchStateDictionary(NSEvent *event) {
-	static const char *key = "RCTEventDispatchStateDictionary";
-	NSMutableDictionary<NSNumber *, NSNumber *> *dict = objc_getAssociatedObject(event, key);
-	if (dict == nil) {
-		dict = [NSMutableDictionary new];
-		objc_setAssociatedObject(event, key, dict, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
-	}
-	return dict;
-}
+- (BOOL)handleKeyboardEvent:(NSEvent *)event {
+  RCTAssert(
+    event.type == NSEventTypeKeyDown ||
+    event.type == NSEventTypeKeyUp,
+    @"Keyboard event must be keyDown, keyUp. Got type: %ld", (long)event.type);
 
-- (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event shouldBlock:(BOOL *)shouldBlock {
-  BOOL keyDown = event.type == NSEventTypeKeyDown;
-  NSArray<RCTHandledKey *> *keyEvents = keyDown ? self.keyDownEvents : self.keyUpEvents;
+  RCTViewKeyboardEvent *keyboardEvent = [RCTViewKeyboardEvent keyEventFromEvent:event reactTag:self.reactTag];
 
-  // If the view is focusable and the component didn't explicity set the keyDownEvents or keyUpEvents,
-  // allow enter/return and spacebar key events to mimic the behavior of native controls.
-  if (self.focusable && keyEvents == nil) {
-    keyEvents = @[
-      [[RCTHandledKey alloc] initWithKey:@"Enter"],
-      [[RCTHandledKey alloc] initWithKey:@" "]
-    ];
+  // Emit the event to JS only once. By default, events, will bubble up the respnder chain
+  // when we call super, so let's emit the event only at the first responder. It would be
+  // simpler to check `if (self == self.window.firstResponder), however, that does not account
+  // for cases like TextInputComponentView, where the first responder may be a subview.
+  static const char kRCTViewKeyboardEventEmittedKey = 0;
+  NSNumber *emitted = objc_getAssociatedObject(event, &kRCTViewKeyboardEventEmittedKey);
+  BOOL alreadyEmitted = [emitted boolValue];
+  if (!alreadyEmitted) {
+    [_eventDispatcher sendEvent:keyboardEvent];
+    objc_setAssociatedObject(event, &kRCTViewKeyboardEventEmittedKey, @(YES), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
   }
 
-  // If a view specifies a key, it will always be removed from the responder chain (i.e. "handled")
-  *shouldBlock = [RCTHandledKey event:event matchesFilter:keyEvents];
-
-  // If an event isn't being removed from the queue, we want to be sure we dispatch it
-  // only once for that view. See note for GetEventDispatchStateDictionary.
-  if (!*shouldBlock) {
-    NSNumber *tag = [self reactTag];
-    NSMutableDictionary<NSNumber *, NSNumber *> *dict = GetEventDispatchStateDictionary(event);
+  NSArray<RCTHandledKey *> *keyEvents = event.type == NSEventTypeKeyDown ? self.keyDownEvents : self.keyUpEvents;
 
-    if ([dict[tag] boolValue]) {
-		return nil;
-	}
-
-	dict[tag] = @YES;
-  }
+  BOOL shouldBlockNativeHandling = [RCTHandledKey event:event matchesFilter:keyEvents];
 
-  return [RCTViewKeyboardEvent keyEventFromEvent:event reactTag:self.reactTag];
-}
-
-- (BOOL)handleKeyboardEvent:(NSEvent *)event {
-  if (event.type == NSEventTypeKeyDown ? self.onKeyDown : self.onKeyUp) {
-	BOOL shouldBlock = YES;
-    RCTViewKeyboardEvent *keyboardEvent = [self keyboardEvent:event shouldBlock:&shouldBlock];
-    if (keyboardEvent) {
-      [_eventDispatcher sendEvent:keyboardEvent];
-      return shouldBlock;
-    }
-  }
-  return NO;
+  return shouldBlockNativeHandling;
 }
 
 - (void)keyDown:(NSEvent *)event {

packages/react-native/React/Views/RCTViewManager.m

@@ -646,8 +646,8 @@ - (void) updateAccessibilityRole:(RCTView *)view withDefaultView:(RCTView *)defa
 RCT_EXPORT_VIEW_PROPERTY(onDragEnter, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onDragLeave, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onDrop, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onKeyDown, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(onKeyUp, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onKeyDown, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onKeyUp, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(keyDownEvents, NSArray<RCTHandledKey *>)
 RCT_EXPORT_VIEW_PROPERTY(keyUpEvents, NSArray<RCTHandledKey *>)
 

packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.cpp

@@ -8,6 +8,7 @@
  // [macOS]
 
 #include <react/renderer/components/view/HostPlatformViewEventEmitter.h>
+#include <react/renderer/components/view/KeyEvent.h>
 
 namespace facebook::react {
 
@@ -21,4 +22,32 @@ void HostPlatformViewEventEmitter::onBlur() const {
   dispatchEvent("blur");
 }
 
+#pragma mark - Keyboard Events
+
+static jsi::Value keyEventPayload(jsi::Runtime& runtime, const KeyEvent& event) {
+  auto payload = jsi::Object(runtime);
+  payload.setProperty(runtime, "key", jsi::String::createFromUtf8(runtime, event.key));
+  payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
+  payload.setProperty(runtime, "shiftKey", event.shiftKey);
+  payload.setProperty(runtime, "altKey", event.altKey);
+  payload.setProperty(runtime, "metaKey", event.metaKey);
+  payload.setProperty(runtime, "capsLockKey", event.capsLockKey);
+  payload.setProperty(runtime, "numericPadKey", event.numericPadKey);
+  payload.setProperty(runtime, "helpKey", event.helpKey);
+  payload.setProperty(runtime, "functionKey", event.functionKey);
+  return payload;
+};
+
+void HostPlatformViewEventEmitter::onKeyDown(const KeyEvent& keyEvent) const {
+  dispatchEvent("keyDown", [keyEvent](jsi::Runtime& runtime) {
+    return keyEventPayload(runtime, keyEvent);
+  });
+}
+
+void HostPlatformViewEventEmitter::onKeyUp(const KeyEvent& keyEvent) const {
+  dispatchEvent("keyUp", [keyEvent](jsi::Runtime& runtime) {
+    return keyEventPayload(runtime, keyEvent);
+  });
+}
+
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.h

@@ -10,6 +10,7 @@
 #pragma once
 
 #include <react/renderer/components/view/BaseViewEventEmitter.h>
+#include <react/renderer/components/view/KeyEvent.h>
 
 namespace facebook::react {
 
@@ -21,6 +22,11 @@ class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
 
   void onFocus() const;
   void onBlur() const;
+
+#pragma mark - Keyboard Events
+
+  void onKeyDown(KeyEvent const &keyEvent) const;
+  void onKeyUp(KeyEvent const &keyEvent) const;
 };
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/MacOSViewEvents.h renamed to packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEvents.h

@@ -14,13 +14,17 @@
 
 namespace facebook::react {
 
-struct MacOSViewEvents {
+struct HostPlatformViewEvents {
   std::bitset<64> bits{};
 
   enum class Offset : std::size_t {
     // Focus Events
     Focus = 0,
     Blur = 1,
+
+    // Keyboard Events
+    KeyDown = 2,
+    KeyUp = 3,
   };
 
   constexpr bool operator[](const Offset offset) const {
@@ -32,27 +36,31 @@ struct MacOSViewEvents {
   }
 };
 
-inline static bool operator==(MacOSViewEvents const &lhs, MacOSViewEvents const &rhs) {
+inline static bool operator==(HostPlatformViewEvents const &lhs, HostPlatformViewEvents const &rhs) {
   return lhs.bits == rhs.bits;
 }
 
-inline static bool operator!=(MacOSViewEvents const &lhs, MacOSViewEvents const &rhs) {
+inline static bool operator!=(HostPlatformViewEvents const &lhs, HostPlatformViewEvents const &rhs) {
   return lhs.bits != rhs.bits;
 }
 
-static inline MacOSViewEvents convertRawProp(
+static inline HostPlatformViewEvents convertRawProp(
     const PropsParserContext &context,
     const RawProps &rawProps,
-    const MacOSViewEvents &sourceValue,
-    const MacOSViewEvents &defaultValue) {
-  MacOSViewEvents result{};
-  using Offset = MacOSViewEvents::Offset;
+    const HostPlatformViewEvents &sourceValue,
+    const HostPlatformViewEvents &defaultValue) {
+  HostPlatformViewEvents result{};
+  using Offset = HostPlatformViewEvents::Offset;
 
   // Focus Events
   result[Offset::Focus] =
       convertRawProp(context, rawProps, "onFocus", sourceValue[Offset::Focus], defaultValue[Offset::Focus]);
   result[Offset::Blur] =
       convertRawProp(context, rawProps, "onBlur", sourceValue[Offset::Blur], defaultValue[Offset::Blur]);
+  result[Offset::KeyDown] =
+      convertRawProp(context, rawProps, "onKeyDown", sourceValue[Offset::KeyDown], defaultValue[Offset::KeyDown]);
+  result[Offset::KeyUp] =
+      convertRawProp(context, rawProps, "onKeyUp", sourceValue[Offset::KeyUp], defaultValue[Offset::KeyUp]);
 
   return result;
 }