Fix bubbling

microsoft · Jul 8, 2023 · 7187c08 · 7187c08
1 parent f1454d6
commit 7187c08
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 12 deletions.
diff --git a/Libraries/NativeComponent/BaseViewConfig.macos.js b/Libraries/NativeComponent/BaseViewConfig.macos.js
@@ -17,19 +17,21 @@ import PlatformBaseViewConfigIos from './BaseViewConfig.ios';
 import {ConditionallyIgnoredEventHandlers} from './ViewConfigIgnore';
 import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
 
-const keyboardConfig = {
-  topKeyUp: {
-    registrationName: 'onKeyUp',
-  },
-  topKeyDown: {
-    registrationName: 'onKeyDown',
-  },
-}
-
 const bubblingEventTypes = {
   ...PlatformBaseViewConfigIos.bubblingEventTypes,
   ...(ReactNativeFeatureFlags.enableCrossPlatformKeyboardEventAPI() && {
-    keyboardConfig,
+    topKeyDown: {
+      phasedRegistrationNames: {
+        captured: 'onKeyDownCapture',
+        bubbled: 'onKeyDown',
+      },
+    },
+    topKeyUp: {
+      phasedRegistrationNames: {
+        captured: 'onKeyUpCapture',
+        bubbled: 'onKeyUp',
+      },
+    },
   }),
 };
 
@@ -51,7 +53,12 @@ const directEventTypes = {
     registrationName: 'onMouseLeave',
   },
   ...(!ReactNativeFeatureFlags.enableCrossPlatformKeyboardEventAPI() && {
-    keyboardConfig,
+    topKeyUp: {
+      registrationName: 'onKeyUp',
+    },
+    topKeyDown: {
+      registrationName: 'onKeyDown',
+    },
   }),
 };
 

diff --git a/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js b/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js
@@ -25,6 +25,32 @@ const switchStyle = {
   justifyContent: 'space-between',
 };
 
+function BubblingExample(): React.Node {
+  const onKeyDown = e => {
+    console.log(e.nativeEvent.key);
+  };
+  return (
+    <View
+      style={{padding: 20, borderColor: 'red', borderWidth: 1}}
+      focusable
+      keyDownEvents={[{key: 'g'}]}
+      onKeyDown={onKeyDown}>
+      <View
+        style={{padding: 20, borderColor: 'green', borderWidth: 1}}
+        focusable
+        keyDownEvents={[{key: 'Tab'}]}
+        onKeyDown={onKeyDown}>
+        <View
+          style={{padding: 20, borderColor: 'blue', borderWidth: 1}}
+          focusable
+          keyDownEvents={[{key: 'g'}]}
+          onKeyDown={onKeyDown}
+        />
+      </View>
+    </View>
+  );
+}
+
 function KeyboardEventExample(): React.Node {
   const [log, setLog] = React.useState([]);
 
@@ -250,9 +276,16 @@ exports.title = 'Keyboard Events';
 exports.description = 'Examples that show how Key events can be used.';
 exports.examples = [
   {
-    title: 'KeyboaradEventExample',
+    title: 'Bubbling Example',
+    render: function (): React.Element<any> {
+      return <BubblingExample />;
+    },
+  },
+  {
+    title: 'Keyboard Event Example',
     render: function (): React.Element<any> {
       return <KeyboardEventExample />;
     },
   },
+
 ];