WIP

Author: Sebastian Silbermann

packages/react-dom-bindings/src/events/DOMEventNames.js

@@ -18,6 +18,7 @@ export type DOMEventName =
   // 'animationstart' |
   | 'beforeblur' // Not a real event. This is used by event experiments.
   | 'beforeinput'
+  | 'beforematch'
   | 'blur'
   | 'canplay'
   | 'canplaythrough'

packages/react-dom-bindings/src/events/DOMEventProperties.js

@@ -34,6 +34,7 @@ export const topLevelEventsToReactNames: Map<DOMEventName, string | null> =
 const simpleEventPluginEvents = [
   'abort',
   'auxClick',
+  'beforematch',
   'cancel',
   'canPlay',
   'canPlayThrough',

packages/react-dom-bindings/src/events/ReactDOMEventListener.js

@@ -53,6 +53,7 @@ import {
 } from 'react-reconciler/src/ReactEventPriorities';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
+import {enableNewDOMProps} from 'shared/ReactFeatureFlags';
 
 const {ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -386,6 +387,11 @@ export function getEventPriority(domEventName: DOMEventName): EventPriority {
           return DefaultEventPriority;
       }
     }
+    case 'beforematch':
+      if (enableNewDOMProps) {
+        return DiscreteEventPriority;
+      }
+    // fall through without enableNewDOMProps
     default:
       return DefaultEventPriority;
   }

packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js

@@ -124,6 +124,23 @@ describe('ReactDOMEventListener', () => {
       });
     });
 
+    it('onBeforeMatch', async () => {
+      await testNativeBubblingEvent({
+        type: 'div',
+        reactEvent: 'onBeforeMatch',
+        reactEventType: 'beforematch',
+        nativeEvent: 'beforematch',
+        dispatch(node) {
+          node.dispatchEvent(
+            new KeyboardEvent('beforematch', {
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        },
+      });
+    });
+
     it('onBlur', async () => {
       await testNativeBubblingEvent({
         type: 'input',

packages/react-dom/src/test-utils/ReactTestUtils.js

@@ -627,6 +627,7 @@ function makeSimulator(eventType) {
 
 // A one-time snapshot with no plans to update. We'll probably want to deprecate Simulate API.
 const simulatedEventTypes = [
+  'beforematch',
   'blur',
   'cancel',
   'click',