From e68e46088e6420f35668f29eb3aaaa3a5101a445 Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Thu, 22 Aug 2024 13:42:02 -0700 Subject: [PATCH 1/4] Remove `validKeysDown`, `validKeysUp`, `passThroughAllKeyEvents` --- .../Libraries/Components/Button.js | 59 +---- .../Components/Pressable/Pressable.js | 25 --- .../View/ReactNativeViewAttributes.js | 3 - .../Components/View/ViewPropTypes.d.ts | 7 +- .../Components/View/ViewPropTypes.js | 24 -- .../NativeComponent/BaseViewConfig.macos.js | 3 - .../Libraries/Pressability/Pressability.js | 4 + .../TextInput/RCTBackedTextInputDelegate.h | 2 +- .../RCTBackedTextInputDelegateAdapter.mm | 4 +- .../Text/TextInput/RCTBaseTextInputView.mm | 6 +- .../__snapshots__/public-api-test.js.snap | 16 -- .../TextInput/RCTTextInputComponentView.mm | 2 +- .../react-native/React/Views/RCTHandledKey.h | 2 +- .../react-native/React/Views/RCTHandledKey.m | 8 +- packages/react-native/React/Views/RCTView.h | 5 +- packages/react-native/React/Views/RCTView.m | 21 +- .../react-native/React/Views/RCTViewManager.m | 9 +- .../React/Views/ScrollView/RCTScrollView.m | 4 +- .../KeyboardEventsExample.js | 212 ++++++------------ .../TextInput/TextInputSharedExamples.js | 72 +----- 20 files changed, 102 insertions(+), 386 deletions(-) diff --git a/packages/react-native/Libraries/Components/Button.js b/packages/react-native/Libraries/Components/Button.js index b7237065f31759..1fd928195fe73a 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 */ @@ -402,8 +347,6 @@ const Button: React.AbstractComponent< // [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 c046c57d7adea2..b36c041616baed 100644 --- a/packages/react-native/Libraries/Components/Pressable/Pressable.js +++ b/packages/react-native/Libraries/Components/Pressable/Pressable.js @@ -186,30 +186,6 @@ type Props = $ReadOnly<{| */ onKeyUp?: ?(event: KeyEvent) => void, - /** - * Array of keys to receive key down events for. These events have their default native behavior prevented. - * - * @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` @@ -377,7 +353,6 @@ function Pressable( onBlur, onKeyDown, onKeyUp, - passthroughAllKeyEvents, keyDownEvents, keyUpEvents, acceptsFirstMouse, diff --git a/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js b/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js index 55b73378732bc9..7c33b48c95180c 100644 --- a/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js +++ b/packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js @@ -51,9 +51,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/ViewPropTypes.d.ts b/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts index 46fdf3ad71d662..bee9199b0fcab9 100644 --- a/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts +++ b/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts @@ -137,11 +137,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 2fdb51f840eaee..2390d966fb6081 100644 --- a/packages/react-native/Libraries/Components/View/ViewPropTypes.js +++ b/packages/react-native/Libraries/Components/View/ViewPropTypes.js @@ -111,30 +111,6 @@ export type KeyboardEventProps = $ReadOnly<{| */ onKeyUp?: ?(event: KeyEvent) => void, - /** - * Array of keys to receive key down events for. These events have their default native behavior prevented. - * - * @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` 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 11c951fd26979f..8102198cc21d2e 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 5b49265d808306..6414206dfabb84 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 54befd8bd84ca4..7fe50d5b24d67a 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; @@ -457,7 +457,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 0fc88ae0a8bc32..dd0e88178c7fe4 100644 --- a/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm +++ b/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm @@ -730,9 +730,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 8c2910be4b7db8..c322e5629c2c54 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 @@ -1664,13 +1664,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, @@ -1866,9 +1859,6 @@ 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, acceptsFirstMouse?: ?boolean, @@ -4031,9 +4021,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, @@ -4223,9 +4210,6 @@ type DirectEventProps = $ReadOnly<{| export type KeyboardEventProps = $ReadOnly<{| onKeyDown?: ?(event: KeyEvent) => void, onKeyUp?: ?(event: KeyEvent) => void, - validKeysDown?: ?Array, - validKeysUp?: ?Array, - passthroughAllKeyEvents?: ?boolean, keyDownEvents?: ?Array, keyUpEvents?: ?Array, |}>; 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 af42831ab582c2..a9b58ed96267b5 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm @@ -504,7 +504,7 @@ - (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 8947d0d16ab562..f314a05f31fb0a 100644 --- a/packages/react-native/React/Views/RCTView.h +++ b/packages/react-native/React/Views/RCTView.h @@ -170,11 +170,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 533b12b0f5b4bf..ba2cc6f24a8da3 100644 --- a/packages/react-native/React/Views/RCTView.m +++ b/packages/react-native/React/Views/RCTView.m @@ -1598,23 +1598,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); @@ -1625,11 +1625,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 1e29fe98279003..54232dac07f278 100644 --- a/packages/react-native/React/Views/RCTViewManager.m +++ b/packages/react-native/React/Views/RCTViewManager.m @@ -654,11 +654,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 8102496efa9910..8a729defeb5f4d 100644 --- a/packages/react-native/React/Views/ScrollView/RCTScrollView.m +++ b/packages/react-native/React/Views/ScrollView/RCTScrollView.m @@ -1332,10 +1332,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 302442a5ed22ff..1ed38da19bb87a 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,38 +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 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: [], + }; const [useKeyDownOrUpEvents, setUseKeyDownOrUpEvents] = React.useState(false); const toggleKeyDownOrUpEvents = React.useCallback( @@ -142,110 +138,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} + +