fix: onFocus/onBlur/onBeforeInput have a matching event type

packages/react-dom/src/events/DOMPluginEventSystem.js

@@ -709,7 +709,7 @@ export function accumulateSinglePhaseListeners(
 
   let instance = targetFiber;
   let lastHostComponent = null;
-  const targetType = event.type;
+  const targetType = event.nativeEvent.type;
 
   // Accumulate all instances and listeners via the target -> root path.
   while (instance !== null) {

packages/react-dom/src/events/ReactSyntheticEventType.js

@@ -29,6 +29,7 @@ export type ReactSyntheticEvent = {|
   _dispatchListeners?: null | Array<Function> | Function,
   _reactName: string,
   _targetInst: Fiber,
+  nativeEvent: Event,
   type: string,
   currentTarget: null | EventTarget,
 |};

packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+describe('SyntheticFocusEvent', () => {
+  let React;
+  let ReactDOM;
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  test('onFocus events have the focus type', () => {
+    const log = [];
+    ReactDOM.render(
+      <button
+        onFocus={event => log.push(`onFocus: ${event.type}`)}
+        onFocusCapture={event => log.push(`onFocusCapture: ${event.type}`)}
+      />,
+      container,
+    );
+    const button = container.querySelector('button');
+
+    button.dispatchEvent(
+      new FocusEvent('focusin', {
+        bubbles: true,
+        cancelable: false,
+      }),
+    );
+
+    expect(log).toEqual(['onFocusCapture: focus', 'onFocus: focus']);
+  });
+
+  test('onBlur events have the blur type', () => {
+    const log = [];
+    ReactDOM.render(
+      <button
+        onBlur={event => log.push(`onBlur: ${event.type}`)}
+        onBlurCapture={event => log.push(`onBlurCapture: ${event.type}`)}
+      />,
+      container,
+    );
+    const button = container.querySelector('button');
+
+    button.dispatchEvent(
+      new FocusEvent('focusout', {
+        bubbles: true,
+        cancelable: false,
+      }),
+    );
+
+    expect(log).toEqual(['onBlurCapture: blur', 'onBlur: blur']);
+  });
+});

packages/react-dom/src/events/plugins/SimpleEventPlugin.js

@@ -158,6 +158,13 @@ function extractEvents(
     EventInterface,
   );
 
+  if (domEventName === 'focusin') {
+    event.type = 'focus';
+  }
+  if (domEventName === 'focusout') {
+    event.type = 'blur';
+  }
+
   const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
   if (
     enableCreateEventHandleAPI &&

packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js

@@ -36,7 +36,7 @@ function initializeModules(hasPointerEvents) {
 const forcePointerEvents = true;
 const table = [[forcePointerEvents], [!forcePointerEvents]];
 
-describe.each(table)(`useFocus`, hasPointerEvents => {
+describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
   let container;
 
   beforeEach(() => {