diff --git a/packages/react-native/Libraries/Components/Button.js b/packages/react-native/Libraries/Components/Button.js index 3d96a055e1711f..7c5b41824d54a2 100644 --- a/packages/react-native/Libraries/Components/Button.js +++ b/packages/react-native/Libraries/Components/Button.js @@ -12,12 +12,7 @@ import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet'; import type {PressEvent} from '../Types/CoreEventTypes'; -import type { - BlurEvent, - FocusEvent, - HandledKeyEvent, - KeyEvent, -} from '../Types/CoreEventTypes'; // [macOS] +import type {BlurEvent, FocusEvent} from '../Types/CoreEventTypes'; // [macOS] import type { AccessibilityActionEvent, AccessibilityActionInfo, @@ -171,56 +166,6 @@ type ButtonProps = $ReadOnly<{| */ onFocus?: ?(e: FocusEvent) => void, - /** - * Handler to be called when a key down press is detected - */ - onKeyDown?: ?(e: KeyEvent) => void, - - /** - * Handler to be called when a key up press is detected - */ - onKeyUp?: ?(e: KeyEvent) => void, - - /* - * @deprecated use `keyDownEvents` or `keyUpEvents` instead - * Array of keys to receive key down events for - * For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", - */ - validKeysDown?: ?Array, - - /* - * @deprecated use `keyDownEvents` or `keyUpEvents` instead - * Array of keys to receive key up events for - * For arrow keys, add "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", - */ - validKeysUp?: ?Array, - - /** - * @deprecated use `keyDownEvents` or `keyUpEvents` instead - * When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in - * `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp` - * are still removed from the event queue, but the others are not. - * - * @platform macos - */ - passthroughAllKeyEvents?: ?boolean, - - /** - * Array of keys to receive key down events for. These events have their default native behavior prevented. - * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents` - * - * @platform macos - */ - keyDownEvents?: ?Array, - - /** - * Array of keys to receive key up events for. These events have their default native behavior prevented. - * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents` - * - * @platform macos - */ - keyUpEvents?: ?Array, - /* * Specifies the Tooltip for the view */ @@ -396,8 +341,6 @@ const Button: React.AbstractComponent = (props: ButtonProps) => { // [macOS onFocus, onBlur, - onKeyDown, - onKeyUp, tooltip, // macOS] } = props; diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js index 6583373b9e8027..c7ac317a61b17d 100644 --- a/packages/react-native/Libraries/Components/Pressable/Pressable.js +++ b/packages/react-native/Libraries/Components/Pressable/Pressable.js @@ -191,36 +191,10 @@ type Props = $ReadOnly<{| * * @platform macos */ - validKeysDown?: ?Array, - - /** - * Array of keys to receive key up events for. These events have their default native behavior prevented. - * - * @platform macos - */ - validKeysUp?: ?Array, - - /** - * @deprecated use `keyDownEvents` or `keyUpEvents` instead - * When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in - * `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp` - * are still removed from the event queue, but the others are not. - * - * @platform macos - */ - passthroughAllKeyEvents?: ?boolean, - - /** - * Array of keys to receive key down events for. These events have their default native behavior prevented. - * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents` - * - * @platform macos - */ keyDownEvents?: ?Array, /** * Array of keys to receive key up events for. These events have their default native behavior prevented. - * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents` * * @platform macos */ @@ -374,7 +348,6 @@ function Pressable(props: Props, forwardedRef): React.Node { onBlur, onKeyDown, onKeyUp, - passthroughAllKeyEvents, keyDownEvents, keyUpEvents, acceptsFirstMouse, diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 8f3f6f81f06f73..4af10a061cb13a 100755 --- a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -19,7 +19,6 @@ import type {EdgeInsetsOrSizeProp} from '../../StyleSheet/EdgeInsetsPropType'; import type { BlurEvent, FocusEvent, - KeyEvent, LayoutEvent, MouseEvent, PressEvent, diff --git a/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js index f15683f0b432f0..2c885adbfbb3c1 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js @@ -48,9 +48,6 @@ const UIView = { onDrop: true, onKeyDown: true, onKeyUp: true, - validKeysDown: true, - validKeysUp: true, - passthroughAllKeyEvents: true, keyDownEvents: true, keyUpEvents: true, draggedTypes: true, diff --git a/packages/react-native/Libraries/Components/View/View.js b/packages/react-native/Libraries/Components/View/View.js index 312ebf8843a085..c4d2fc63ada85f 100644 --- a/packages/react-native/Libraries/Components/View/View.js +++ b/packages/react-native/Libraries/Components/View/View.js @@ -55,13 +55,6 @@ const View: React.AbstractComponent< nativeID, pointerEvents, tabIndex, - // [macOS - passthroughAllKeyEvents, - validKeysDown, - validKeysUp, - keyDownEvents, - keyUpEvents, - // macOS] ...otherProps }: ViewProps, forwardedRef, @@ -109,19 +102,6 @@ const View: React.AbstractComponent< // $FlowFixMe[sketchy-null-mixed] const newPointerEvents = style?.pointerEvents || pointerEvents; - // [macOS - let _passthroughAllKeyEvents = passthroughAllKeyEvents; - let _validKeysDown = validKeysDown; - let _validKeysUp = validKeysUp; - if (keyDownEvents || keyUpEvents) { - _passthroughAllKeyEvents = true; - // $FlowFixMe[incompatible-type] - _validKeysDown = keyDownEvents; - // $FlowFixMe[incompatible-type] - _validKeysUp = keyUpEvents; - } - // macOS] - const actualView = ( ); diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts b/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts index aa426748a8be4f..ea87d26d5939ea 100644 --- a/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts +++ b/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts @@ -167,6 +167,14 @@ export interface ViewPropsAndroid { export type DraggedType = 'fileUrl'; export type DraggedTypesType = DraggedType | DraggedType[]; +export type HandledKeyEvent = { + altKey?: boolean | undefined; + ctrlKey?: boolean | undefined; + metaKey?: boolean | undefined; + shiftKey?: boolean | undefined; + key: string; +}; + export interface ViewPropsMacOS { acceptsFirstMouse?: boolean | undefined; allowsVibrancy?: boolean | undefined; @@ -179,11 +187,8 @@ export interface ViewPropsMacOS { onDrop?: ((event: MouseEvent) => void) | undefined; onKeyDown?: ((event: KeyEvent) => void) | undefined; onKeyUp?: ((event: KeyEvent) => void) | undefined; - validKeysDown?: Array | undefined; - validKeysUp?: Array | undefined; - passthroughAllKeyEvents?: boolean | undefined; - keyDownEvents?: Array | undefined; - keyUpEvents?: Array | undefined; + keyDownEvents?: HandledKeyEvent[] | undefined; + keyUpEvents?: HandledKeyEvent[] | undefined; draggedTypes?: DraggedTypesType | undefined; } diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.js b/packages/react-native/Libraries/Components/View/ViewPropTypes.js index 226e130271cedc..f3ffb1dde12aa7 100644 --- a/packages/react-native/Libraries/Components/View/ViewPropTypes.js +++ b/packages/react-native/Libraries/Components/View/ViewPropTypes.js @@ -116,36 +116,10 @@ export type KeyboardEventProps = $ReadOnly<{| * * @platform macos */ - validKeysDown?: ?Array, - - /** - * Array of keys to receive key up events for. These events have their default native behavior prevented. - * - * @platform macos - */ - validKeysUp?: ?Array, - - /** - * @deprecated use `keyDownEvents` or `keyUpEvents` instead - * When `true`, allows `onKeyDown` and `onKeyUp` to receive events not specified in - * `validKeysDown` and `validKeysUp`, respectively. Events matching `validKeysDown` and `validKeysUp` - * are still removed from the event queue, but the others are not. - * - * @platform macos - */ - passthroughAllKeyEvents?: ?boolean, - - /** - * Array of keys to receive key down events for. These events have their default native behavior prevented. - * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents` - * - * @platform macos - */ keyDownEvents?: ?Array, /** * Array of keys to receive key up events for. These events have their default native behavior prevented. - * Overrides the props `validKeysDown`, `validKeysUp` and `passthroughAllKeyEvents` * * @platform macos */ diff --git a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.macos.js b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.macos.js index 2cd32a5532fc46..cd4007a16af4fe 100644 --- a/packages/react-native/Libraries/NativeComponent/BaseViewConfig.macos.js +++ b/packages/react-native/Libraries/NativeComponent/BaseViewConfig.macos.js @@ -53,9 +53,6 @@ const validAttributesForNonEventProps = { draggedTypes: true, enableFocusRing: true, tooltip: true, - validKeysDown: true, - validKeysUp: true, - passthroughAllKeyEvents: true, keyDownEvents: true, keyUpEvents: true, mouseDownCanMoveWindow: true, diff --git a/packages/react-native/Libraries/Pressability/Pressability.js b/packages/react-native/Libraries/Pressability/Pressability.js index 6abbb1aeee4155..7716c27cecb68d 100644 --- a/packages/react-native/Libraries/Pressability/Pressability.js +++ b/packages/react-native/Libraries/Pressability/Pressability.js @@ -101,11 +101,15 @@ export type PressabilityConfig = $ReadOnly<{| // [macOS /* * Called after a key down event is detected. + * + * @platform macos */ onKeyDown?: ?(event: KeyEvent) => void, /* * Called after a key up event is detected. + * + * @platform macos */ onKeyUp?: ?(event: KeyEvent) => void, // macOS] diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h index f90f11c91810cd..b8ec7495635790 100644 --- a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h +++ b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h @@ -48,7 +48,7 @@ NS_ASSUME_NONNULL_BEGIN #if TARGET_OS_OSX // [macOS - (BOOL)textInputShouldHandleDeleteForward:(id)sender; // Return `YES` to have the deleteForward event handled normally. Return `NO` to disallow it and handle it yourself. - (BOOL)textInputShouldHandleKeyEvent:(NSEvent *)event; // Return `YES` to have the key event handled normally. Return `NO` to disallow it and handle it yourself. -- (BOOL)hasValidKeyDownOrValidKeyUp:(NSString *)key; +- (BOOL)hasKeyDownEventOrKeyUpEvent:(NSString *)key; - (NSDragOperation)textInputDraggingEntered:(id)draggingInfo; - (void)textInputDraggingExited:(id)draggingInfo; - (BOOL)textInputShouldHandleDragOperation:(id)draggingInfo; diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm index aab2d70e9e7650..7838b948eaff3b 100644 --- a/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm +++ b/packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm @@ -228,7 +228,7 @@ - (BOOL)control:(NSControl *)control textView:(NSTextView *)fieldEditor doComman //escape } else if (commandSelector == @selector(cancelOperation:)) { [textInputDelegate textInputDidCancel]; - if (![textInputDelegate hasValidKeyDownOrValidKeyUp:@"Escape"]) { + if (![textInputDelegate hasKeyDownEventOrKeyUpEvent:@"Escape"]) { [[_backedTextInputView window] makeFirstResponder:nil]; } commandHandled = YES; @@ -450,7 +450,7 @@ - (BOOL)textView:(NSTextView *)textView doCommandBySelector:(SEL)commandSelector //escape } else if (commandSelector == @selector(cancelOperation:)) { [textInputDelegate textInputDidCancel]; - if (![textInputDelegate hasValidKeyDownOrValidKeyUp:@"Escape"]) { + if (![textInputDelegate hasKeyDownEventOrKeyUpEvent:@"Escape"]) { [[_backedTextInputView window] makeFirstResponder:nil]; } commandHandled = YES; diff --git a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm index b805f10d861a33..c6855bd7228df4 100644 --- a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm +++ b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm @@ -749,9 +749,9 @@ - (BOOL)textInputShouldHandleDeleteForward:(__unused id)sender { return YES; } -- (BOOL)hasValidKeyDownOrValidKeyUp:(NSString *)key { - return [RCTHandledKey key:key matchesFilter:self.validKeysDown] - || [RCTHandledKey key:key matchesFilter:self.validKeysUp]; +- (BOOL)hasKeyDownEventOrKeyUpEvent:(NSString *)key { + return [RCTHandledKey key:key matchesFilter:self.keyDownEvents] + || [RCTHandledKey key:key matchesFilter:self.keyUpEvents]; } - (NSDragOperation)textInputDraggingEntered:(id)draggingInfo diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index cad824273311d5..5695160bd51878 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -1706,13 +1706,6 @@ exports[`public API should not change unintentionally Libraries/Components/Butto onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, onBlur?: ?(e: BlurEvent) => void, onFocus?: ?(e: FocusEvent) => void, - onKeyDown?: ?(e: KeyEvent) => void, - onKeyUp?: ?(e: KeyEvent) => void, - validKeysDown?: ?Array, - validKeysUp?: ?Array, - passthroughAllKeyEvents?: ?boolean, - keyDownEvents?: ?Array, - keyUpEvents?: ?Array, tooltip?: string, accessible?: ?boolean, accessibilityActions?: ?$ReadOnlyArray, @@ -1904,11 +1897,8 @@ type Props = $ReadOnly<{| onBlur?: ?(event: BlurEvent) => void, onKeyDown?: ?(event: KeyEvent) => void, onKeyUp?: ?(event: KeyEvent) => void, - validKeysDown?: ?Array, - validKeysUp?: ?Array, - passthroughAllKeyEvents?: ?boolean, - keyDownEvents?: ?Array, - keyUpEvents?: ?Array, + keyDownEvents?: ?Array, + keyUpEvents?: ?Array, acceptsFirstMouse?: ?boolean, mouseDownCanMoveWindow?: ?boolean, enableFocusRing?: ?boolean, @@ -3639,9 +3629,6 @@ exports[`public API should not change unintentionally Libraries/Components/View/ onDrop: true, onKeyDown: true, onKeyUp: true, - validKeysDown: true, - validKeysUp: true, - passthroughAllKeyEvents: true, keyDownEvents: true, keyUpEvents: true, draggedTypes: true, @@ -3828,21 +3815,11 @@ type DirectEventProps = $ReadOnly<{| onMagicTap?: ?() => mixed, onAccessibilityEscape?: ?() => mixed, |}>; -export type HandledKeyboardEvent = $ReadOnly<{| - altKey?: ?boolean, - ctrlKey?: ?boolean, - metaKey?: ?boolean, - shiftKey?: ?boolean, - key: string, -|}>; export type KeyboardEventProps = $ReadOnly<{| onKeyDown?: ?(event: KeyEvent) => void, onKeyUp?: ?(event: KeyEvent) => void, - validKeysDown?: ?Array, - validKeysUp?: ?Array, - passthroughAllKeyEvents?: ?boolean, - keyDownEvents?: ?Array, - keyUpEvents?: ?Array, + keyDownEvents?: ?Array, + keyUpEvents?: ?Array, |}>; type MouseEventProps = $ReadOnly<{| onMouseEnter?: ?(event: MouseEvent) => void, @@ -8539,6 +8516,13 @@ export type KeyEvent = SyntheticEvent< key: string, |}>, >; +export type HandledKeyEvent = $ReadOnly<{| + altKey?: ?boolean, + ctrlKey?: ?boolean, + metaKey?: ?boolean, + shiftKey?: ?boolean, + key: string, +|}>; export type MouseEvent = SyntheticEvent< $ReadOnly<{| clientX: number, diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm index cb0e202ef65555..de7e82f93d6200 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm @@ -446,7 +446,7 @@ - (void)continuousSpellCheckingDidChange:(BOOL)enabled {} - (void)grammarCheckingDidChange:(BOOL)enabled {} -- (BOOL)hasValidKeyDownOrValidKeyUp:(nonnull NSString *)key { +- (BOOL)hasKeyDownEventOrKeyUpEvent:(nonnull NSString *)key { return YES; } diff --git a/packages/react-native/React/Views/RCTHandledKey.h b/packages/react-native/React/Views/RCTHandledKey.h index f0d2562d46c9df..d23a3494b0754e 100644 --- a/packages/react-native/React/Views/RCTHandledKey.h +++ b/packages/react-native/React/Views/RCTHandledKey.h @@ -10,7 +10,7 @@ #if TARGET_OS_OSX #import -// This class is used for specifying key filtering e.g. for -[RCTView validKeysDown] and -[RCTView validKeysUp] +// This class is used for specifying key filtering e.g. for -[RCTView keyDownEvents] and -[RCTView keyUpEvents] // Also see RCTViewKeyboardEvent, which is a React representation of an actual NSEvent that is dispatched to JS. @interface RCTHandledKey : NSObject diff --git a/packages/react-native/React/Views/RCTHandledKey.m b/packages/react-native/React/Views/RCTHandledKey.m index aa685c3b999044..a7c61d7a2e6c2b 100644 --- a/packages/react-native/React/Views/RCTHandledKey.m +++ b/packages/react-native/React/Views/RCTHandledKey.m @@ -103,12 +103,6 @@ @implementation RCTConvert (RCTHandledKey) + (RCTHandledKey *)RCTHandledKey:(id)json { - // legacy way of specifying validKeysDown and validKeysUp -- here we ignore the modifiers when comparing to the NSEvent - if ([json isKindOfClass:[NSString class]]) { - return [[RCTHandledKey alloc] initWithKey:(NSString *)json]; - } - - // modern way of specifying validKeys and validKeysUp -- here we assume missing modifiers to mean false\NO if ([json isKindOfClass:[NSDictionary class]]) { NSDictionary *dict = (NSDictionary *)json; NSString *key = dict[@"key"]; @@ -122,7 +116,7 @@ + (RCTHandledKey *)RCTHandledKey:(id)json for (NSString *key in modifiers) { id value = dict[key]; if (value == nil) { - value = @NO; // assume NO -- instead of nil i.e. "don't care" unlike the string case above. + value = @(NO); // assume NO -- instead of nil i.e. "don't care" unlike the string case above. } if (![value isKindOfClass:[NSNumber class]]) { diff --git a/packages/react-native/React/Views/RCTView.h b/packages/react-native/React/Views/RCTView.h index d096c4c09b1fb3..94a3b07e18124b 100644 --- a/packages/react-native/React/Views/RCTView.h +++ b/packages/react-native/React/Views/RCTView.h @@ -161,6 +161,7 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait; /** * macOS Properties */ + @property (nonatomic, assign) CATransform3D transform3D; // `allowsVibrancy` is readonly on NSView, so let's create a new property to make it assignable @@ -171,11 +172,10 @@ 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, assign) BOOL passthroughAllKeyEvents; @property (nonatomic, copy) RCTDirectEventBlock onKeyDown; @property (nonatomic, copy) RCTDirectEventBlock onKeyUp; -@property (nonatomic, copy) NSArray *validKeysDown; -@property (nonatomic, copy) NSArray *validKeysUp; +@property (nonatomic, copy) NSArray *keyDownEvents; +@property (nonatomic, copy) NSArray *keyUpEvents; // Shadow Properties @property (nonatomic, strong) NSColor *shadowColor; diff --git a/packages/react-native/React/Views/RCTView.m b/packages/react-native/React/Views/RCTView.m index 1dcb0bd368b7cf..4bac9482ef63b3 100644 --- a/packages/react-native/React/Views/RCTView.m +++ b/packages/react-native/React/Views/RCTView.m @@ -1611,23 +1611,23 @@ - (BOOL)performDragOperation:(id )sender - (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event shouldBlock:(BOOL *)shouldBlock { BOOL keyDown = event.type == NSEventTypeKeyDown; - NSArray *validKeys = keyDown ? self.validKeysDown : self.validKeysUp; + NSArray *keyEvents = keyDown ? self.keyDownEvents : self.keyUpEvents; - // If the view is focusable and the component didn't explicity set the validKeysDown or validKeysUp, + // 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 && validKeys == nil) { - validKeys = @[ + if (self.focusable && keyEvents == nil) { + keyEvents = @[ [[RCTHandledKey alloc] initWithKey:@"Enter"], [[RCTHandledKey alloc] initWithKey:@" "] ]; } // If a view specifies a key, it will always be removed from the responder chain (i.e. "handled") - *shouldBlock = [RCTHandledKey event:event matchesFilter:validKeys]; + *shouldBlock = [RCTHandledKey event:event matchesFilter:keyEvents]; - // If an event isn't being removed from the queue, but was requested to "passthrough" by a view, - // we want to be sure we dispatch it only once for that view. See note for GetEventDispatchStateDictionary. - if ([self passthroughAllKeyEvents] && !*shouldBlock) { + // 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 *dict = GetEventDispatchStateDictionary(event); @@ -1638,11 +1638,6 @@ - (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event shouldBlock:(BOOL *)shoul dict[tag] = @YES; } - // Don't pass events we don't care about - if (![self passthroughAllKeyEvents] && !*shouldBlock) { - return nil; - } - return [RCTViewKeyboardEvent keyEventFromEvent:event reactTag:self.reactTag]; } diff --git a/packages/react-native/React/Views/RCTViewManager.m b/packages/react-native/React/Views/RCTViewManager.m index 0da924952f1654..e6da66464eb417 100644 --- a/packages/react-native/React/Views/RCTViewManager.m +++ b/packages/react-native/React/Views/RCTViewManager.m @@ -602,11 +602,10 @@ - (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(passthroughAllKeyEvents, BOOL) -RCT_EXPORT_VIEW_PROPERTY(onKeyDown, RCTDirectEventBlock) // macOS keyboard events -RCT_EXPORT_VIEW_PROPERTY(onKeyUp, RCTDirectEventBlock) // macOS keyboard events -RCT_EXPORT_VIEW_PROPERTY(validKeysDown, NSArray) -RCT_EXPORT_VIEW_PROPERTY(validKeysUp, NSArray) +RCT_EXPORT_VIEW_PROPERTY(onKeyDown, RCTDirectEventBlock) +RCT_EXPORT_VIEW_PROPERTY(onKeyUp, RCTDirectEventBlock) +RCT_EXPORT_VIEW_PROPERTY(keyDownEvents, NSArray) +RCT_EXPORT_VIEW_PROPERTY(keyUpEvents, NSArray) #endif // macOS] diff --git a/packages/react-native/React/Views/ScrollView/RCTScrollView.m b/packages/react-native/React/Views/ScrollView/RCTScrollView.m index ac5edb85810a45..0a9bcc12b88ef2 100644 --- a/packages/react-native/React/Views/ScrollView/RCTScrollView.m +++ b/packages/react-native/React/Views/ScrollView/RCTScrollView.m @@ -1319,10 +1319,10 @@ - (void)uiManagerWillPerformMounting:(RCTUIManager *)manager #if TARGET_OS_OSX - (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event { BOOL keyDown = event.type == NSEventTypeKeyDown; - NSArray *validKeys = keyDown ? self.validKeysDown : self.validKeysUp; + NSArray *keyEvents = keyDown ? self.keyDownEvents : self.keyUpEvents; // Only post events for keys we care about - if (![RCTHandledKey event:event matchesFilter:validKeys]) { + if (![RCTHandledKey event:event matchesFilter:keyEvents]) { return nil; } diff --git a/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js b/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js index 558f7e7677ca8c..851f0464a65b0b 100644 --- a/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js +++ b/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js @@ -18,13 +18,6 @@ const ReactNative = require('react-native'); const {Button, ScrollView, StyleSheet, Switch, Text, TextInput, View} = ReactNative; -const switchStyle = { - alignItems: 'center', - padding: 10, - flexDirection: 'row', - justifyContent: 'space-between', -}; - function KeyEventExample(): React.Node { // $FlowFixMe[missing-empty-array-annot] const [log, setLog] = React.useState([]); @@ -57,81 +50,41 @@ function KeyEventExample(): React.Node { [appendLog], ); - const [showView, setShowView] = React.useState(true); - const toggleShowView = React.useCallback( - (value: boolean) => { - setShowView(value); - }, - [setShowView], - ); - - const [showTextInput, setShowTextInput] = React.useState(true); - const toggleShowTextInput = React.useCallback( - (value: boolean) => { - setShowTextInput(value); - }, - [setShowTextInput], - ); - - const [showTextInput2, setShowTextInput2] = React.useState(true); - const toggleShowTextInput2 = React.useCallback( - (value: boolean) => { - setShowTextInput2(value); - }, - [setShowTextInput2], - ); - - const [passthroughAllKeyEvents, setPassthroughAllKeyEvents] = - React.useState(false); - const togglePassthroughAllKeyEvents = React.useCallback( - (value: boolean) => { - setPassthroughAllKeyEvents(value); - }, - [setPassthroughAllKeyEvents], - ); - - const [useKeyDownOrUpEvents, setUseKeyDownOrUpEvents] = React.useState(false); - const toggleKeyDownOrUpEvents = React.useCallback( - (value: boolean) => { - setUseKeyDownOrUpEvents(value); - }, - [setUseKeyDownOrUpEvents], - ); - - const ViewText = useKeyDownOrUpEvents - ? "keyDownEvents: [{key: 'g'}, {key: 'Escape'}, {key: 'Enter'}, {key: 'ArrowLeft'}] \nkeyUpEvents: [{key: 'c'}, {key: 'd'}]" - : 'validKeysDown: [g, Escape, Enter, ArrowLeft] \nvalidKeysUp: [c, d]'; - const viewKeyboardProps = useKeyDownOrUpEvents - ? { - keyDownEvents: [ - {key: 'g'}, - {key: 'Escape'}, - {key: 'Enter'}, - {key: 'ArrowLeft'}, - ], - keyUpEvents: [{key: 'c'}, {key: 'd'}], - } - : { - validKeysDown: ['g', 'Escape', 'Enter', 'ArrowLeft'], - validKeysUp: ['c ', 'd'], - }; - - const TextInputText = useKeyDownOrUpEvents - ? "keyDownEvents: [{key: 'ArrowRight'}, {key: 'ArrowDown'}, {key: 'Enter', ctrlKey: true}, \nkeyUpEvents: [{key: 'Escape'}, {key: 'Enter'}]" - : "validKeysDown: ['ArrowRight', 'ArrowDown', 'Enter'] \nvalidKeysUp: ['Escape ', {key: 'Enter', ctrlKey: true}]"; - const textInputKeyboardProps = useKeyDownOrUpEvents - ? { - keyDownEvents: [ - {key: 'ArrowRight'}, - {key: 'ArrowDown'}, - {key: 'Enter', ctrlKey: true}, - ], - keyUpEvents: [{key: 'Escape'}, {key: 'Enter'}], - } - : { - validKeysDown: ['ArrowRight', 'ArrowDown', 'Enter'], - validKeysUp: ['Escape ', {key: 'Enter', ctrlKey: true}], - }; + const viewText = + "keyDownEvents: [{key: 'g'}, {key: 'Escape'}, {key: 'Enter'}, {key: 'ArrowLeft'}] \nkeyUpEvents: [{key: 'c'}, {key: 'd'}]"; + const viewKeyboardProps = { + onKeyDown: handleKeyDown, + keyDownEvents: [ + {key: 'g'}, + {key: 'Escape'}, + {key: 'Enter'}, + {key: 'ArrowLeft'}, + ], + onKeyUp: handleKeyUp, + keyUpEvents: [{key: 'c'}, {key: 'd'}], + }; + + const textInputText = + "keyDownEvents: [{key: 'ArrowRight'}, {key: 'ArrowDown'}, {key: 'Enter', ctrlKey: true}, \nkeyUpEvents: [{key: 'Escape'}, {key: 'Enter'}]"; + const textInputKeyboardProps = { + onKeyDown: handleKeyDown, + keyDownEvents: [ + {key: 'ArrowRight'}, + {key: 'ArrowDown'}, + {key: 'Enter', ctrlKey: true}, + ], + onKeyUp: handleKeyUp, + keyUpEvents: [{key: 'Escape'}, {key: 'Enter'}], + }; + + const textInputUnhandledText = + "keyDownEvents: [{key: 'ArrowRight'}, {key: 'ArrowDown'}, {key: 'Enter', ctrlKey: true}, \nkeyUpEvents: [{key: 'Escape'}, {key: 'Enter'}]"; + const textInputunHandledKeyboardProps = { + onKeyDown: handleKeyDown, + // keyDownEvents: [], + onKeyUp: handleKeyUp, + // keyUpEvents: [], + }; return ( @@ -142,110 +95,40 @@ function KeyEventExample(): React.Node { Shortcuts > Use keyboard navigation to move focus between controls. - - View - - - {showView && ( - <> - {ViewText} - - - )} - - TextInput - - - {showTextInput && ( - <> - {TextInputText} - - - - )} - - TextInput with no handled keys - - - {showTextInput2 && ( - <> - - validKeysDown: []{'\n'} - validKeysUp: [] - - - - - )} - - {'Pass through all key events'} - - - - {'Use keyDownEvents / keyUpEvents'} - - + {viewText} + + {textInputText} + + + {textInputUnhandledText} + +