Modern Event System: use focusin/focusout for onFocus/onBlur

Fix test now we use capture phase

Cleanup

Address feedback

Revise

Fix ReactDOMInput-test

Fix

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

@@ -183,6 +183,7 @@ describe('ReactDOMInput', () => {
     // bypass the lazy event attachment system so we won't actually test this.
     dispatchEventOnNode(instance.a, 'input');
     dispatchEventOnNode(instance.a, 'blur');
+    dispatchEventOnNode(instance.a, 'focusout');
 
     expect(instance.a.value).toBe('giraffe');
     expect(instance.switchedFocus).toBe(true);
@@ -684,6 +685,7 @@ describe('ReactDOMInput', () => {
       expect(node.hasAttribute('value')).toBe(false);
     } else {
       dispatchEventOnNode(node, 'blur');
+      dispatchEventOnNode(node, 'focusout');
 
       expect(node.value).toBe('0.0');
       expect(node.getAttribute('value')).toBe('0.0');
@@ -1771,6 +1773,7 @@ describe('ReactDOMInput', () => {
       // be the only way to remove focus in JSDOM
       node.blur();
       dispatchEventOnNode(node, 'blur');
+      dispatchEventOnNode(node, 'focusout');
 
       if (disableInputAttributeSyncing) {
         expect(node.value).toBe('2');
@@ -1796,6 +1799,7 @@ describe('ReactDOMInput', () => {
       // be the only way to remove focus in JSDOM
       node.blur();
       dispatchEventOnNode(node, 'blur');
+      dispatchEventOnNode(node, 'focusout');
 
       expect(node.getAttribute('value')).toBe('1');
     });
@@ -1815,6 +1819,7 @@ describe('ReactDOMInput', () => {
       // be the only way to remove focus in JSDOM
       node.blur();
       dispatchEventOnNode(node, 'blur');
+      dispatchEventOnNode(node, 'focusout');
 
       expect(node.getAttribute('value')).toBe('1');
     });

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

@@ -41,7 +41,6 @@ const eventPriorities = new Map();
 
 // prettier-ignore
 const discreteEventPairsForSimpleEventPlugin = [
-  DOMTopLevelEventTypes.TOP_BLUR, 'blur',
   DOMTopLevelEventTypes.TOP_CANCEL, 'cancel',
   DOMTopLevelEventTypes.TOP_CLICK, 'click',
   DOMTopLevelEventTypes.TOP_CLOSE, 'close',
@@ -53,7 +52,8 @@ const discreteEventPairsForSimpleEventPlugin = [
   DOMTopLevelEventTypes.TOP_DRAG_END, 'dragEnd',
   DOMTopLevelEventTypes.TOP_DRAG_START, 'dragStart',
   DOMTopLevelEventTypes.TOP_DROP, 'drop',
-  DOMTopLevelEventTypes.TOP_FOCUS, 'focus',
+  DOMTopLevelEventTypes.TOP_FOCUS_IN, 'focus',
+  DOMTopLevelEventTypes.TOP_FOCUS_OUT, 'blur',
   DOMTopLevelEventTypes.TOP_INPUT, 'input',
   DOMTopLevelEventTypes.TOP_INVALID, 'invalid',
   DOMTopLevelEventTypes.TOP_KEY_DOWN, 'keyDown',

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

@@ -43,12 +43,10 @@ import {
 
 import getEventTarget from './getEventTarget';
 import {
-  TOP_FOCUS,
   TOP_LOAD,
   TOP_ABORT,
   TOP_CANCEL,
   TOP_INVALID,
-  TOP_BLUR,
   TOP_SCROLL,
   TOP_CLOSE,
   TOP_RESET,
@@ -207,8 +205,6 @@ function extractEvents(
 }
 
 export const capturePhaseEvents: Set<DOMTopLevelEventType> = new Set([
-  TOP_FOCUS,
-  TOP_BLUR,
   TOP_SCROLL,
   TOP_LOAD,
   TOP_ABORT,

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

@@ -32,7 +32,6 @@ export const TOP_ANIMATION_ITERATION = unsafeCastStringToDOMTopLevelType(
 export const TOP_ANIMATION_START = unsafeCastStringToDOMTopLevelType(
   getVendorPrefixedEventName('animationstart'),
 );
-export const TOP_BLUR = unsafeCastStringToDOMTopLevelType('blur');
 export const TOP_CAN_PLAY = unsafeCastStringToDOMTopLevelType('canplay');
 export const TOP_CAN_PLAY_THROUGH = unsafeCastStringToDOMTopLevelType(
   'canplaythrough',
@@ -72,7 +71,6 @@ export const TOP_EMPTIED = unsafeCastStringToDOMTopLevelType('emptied');
 export const TOP_ENCRYPTED = unsafeCastStringToDOMTopLevelType('encrypted');
 export const TOP_ENDED = unsafeCastStringToDOMTopLevelType('ended');
 export const TOP_ERROR = unsafeCastStringToDOMTopLevelType('error');
-export const TOP_FOCUS = unsafeCastStringToDOMTopLevelType('focus');
 export const TOP_GOT_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType(
   'gotpointercapture',
 );
@@ -152,6 +150,9 @@ export const TOP_WHEEL = unsafeCastStringToDOMTopLevelType('wheel');
 export const TOP_AFTER_BLUR = unsafeCastStringToDOMTopLevelType('afterblur');
 export const TOP_BEFORE_BLUR = unsafeCastStringToDOMTopLevelType('beforeblur');
 
+export const TOP_FOCUS_IN = unsafeCastStringToDOMTopLevelType('focusin');
+export const TOP_FOCUS_OUT = unsafeCastStringToDOMTopLevelType('focusout');
+
 // List of events that need to be individually attached to media elements.
 // Note that events in this list will *not* be listened to at the top level
 // unless they're explicitly listed in `ReactBrowserEventEmitter.listenTo`.

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

@@ -131,8 +131,8 @@ import {
   TOP_POINTER_OUT,
   TOP_GOT_POINTER_CAPTURE,
   TOP_LOST_POINTER_CAPTURE,
-  TOP_FOCUS,
-  TOP_BLUR,
+  TOP_FOCUS_IN,
+  TOP_FOCUS_OUT,
 } from './DOMTopLevelEventTypes';
 import {IS_REPLAYED, PLUGIN_EVENT_SYSTEM} from './EventSystemFlags';
 import {
@@ -216,10 +216,10 @@ const discreteReplayableEvents = [
 ];
 
 const continuousReplayableEvents = [
-  TOP_FOCUS,
-  TOP_BLUR,
   TOP_DRAG_ENTER,
   TOP_DRAG_LEAVE,
+  TOP_FOCUS_IN,
+  TOP_FOCUS_OUT,
   TOP_MOUSE_OVER,
   TOP_MOUSE_OUT,
   TOP_POINTER_OVER,
@@ -362,8 +362,8 @@ export function clearIfContinuousEvent(
   nativeEvent: AnyNativeEvent,
 ): void {
   switch (topLevelType) {
-    case TOP_FOCUS:
-    case TOP_BLUR:
+    case TOP_FOCUS_IN:
+    case TOP_FOCUS_OUT:
       queuedFocus = null;
       break;
     case TOP_DRAG_ENTER:
@@ -443,7 +443,7 @@ export function queueIfContinuousEvent(
   // moved from outside the window (no target) onto the target once it hydrates.
   // Instead of mutating we could clone the event.
   switch (topLevelType) {
-    case TOP_FOCUS: {
+    case TOP_FOCUS_IN: {
       const focusEvent = ((nativeEvent: any): FocusEvent);
       queuedFocus = accumulateOrCreateContinuousQueuedReplayableEvent(
         queuedFocus,

packages/react-dom/src/events/__tests__/DOMModernPluginEventSystem-test.internal.js

@@ -855,9 +855,9 @@ describe('DOMModernPluginEventSystem', () => {
           expect(onFocus).toHaveBeenCalledTimes(3);
           expect(onFocusCapture).toHaveBeenCalledTimes(3);
           expect(log[2]).toEqual(['capture', buttonElement]);
-          expect(log[3]).toEqual(['bubble', buttonElement]);
-          expect(log[4]).toEqual(['capture', divElement]);
-          expect(log[5]).toEqual(['bubble', divElement]);
+          expect(log[3]).toEqual(['capture', divElement]);
+          expect(log[4]).toEqual(['bubble', divElement]);
+          expect(log[5]).toEqual(['bubble', buttonElement]);
         });
 
         it('handle propagation of focus events between portals', () => {

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

@@ -11,7 +11,7 @@ import {canUseDOM} from 'shared/ExecutionEnvironment';
 
 import {registerTwoPhaseEvent} from '../EventRegistry';
 import {
-  TOP_BLUR,
+  TOP_FOCUS_OUT,
   TOP_COMPOSITION_START,
   TOP_COMPOSITION_END,
   TOP_COMPOSITION_UPDATE,
@@ -66,24 +66,24 @@ function registerEvents() {
     TOP_PASTE,
   ]);
   registerTwoPhaseEvent('onCompositionEnd', [
-    TOP_BLUR,
     TOP_COMPOSITION_END,
+    TOP_FOCUS_OUT,
     TOP_KEY_DOWN,
     TOP_KEY_PRESS,
     TOP_KEY_UP,
     TOP_MOUSE_DOWN,
   ]);
   registerTwoPhaseEvent('onCompositionStart', [
-    TOP_BLUR,
     TOP_COMPOSITION_START,
+    TOP_FOCUS_OUT,
     TOP_KEY_DOWN,
     TOP_KEY_PRESS,
     TOP_KEY_UP,
     TOP_MOUSE_DOWN,
   ]);
   registerTwoPhaseEvent('onCompositionUpdate', [
-    TOP_BLUR,
     TOP_COMPOSITION_UPDATE,
+    TOP_FOCUS_OUT,
     TOP_KEY_DOWN,
     TOP_KEY_PRESS,
     TOP_KEY_UP,
@@ -154,7 +154,7 @@ function isFallbackCompositionEnd(topLevelType, nativeEvent) {
       return nativeEvent.keyCode !== START_KEYCODE;
     case TOP_KEY_PRESS:
     case TOP_MOUSE_DOWN:
-    case TOP_BLUR:
+    case TOP_FOCUS_OUT:
       // Events are not possible without cancelling IME.
       return true;
     default:

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

@@ -17,10 +17,10 @@ import isTextInputElement from '../isTextInputElement';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 
 import {
-  TOP_BLUR,
+  TOP_FOCUS_OUT,
   TOP_CHANGE,
   TOP_CLICK,
-  TOP_FOCUS,
+  TOP_FOCUS_IN,
   TOP_INPUT,
   TOP_KEY_DOWN,
   TOP_KEY_UP,
@@ -42,10 +42,10 @@ import {
 
 function registerEvents() {
   registerTwoPhaseEvent('onChange', [
-    TOP_BLUR,
     TOP_CHANGE,
     TOP_CLICK,
-    TOP_FOCUS,
+    TOP_FOCUS_IN,
+    TOP_FOCUS_OUT,
     TOP_INPUT,
     TOP_KEY_DOWN,
     TOP_KEY_UP,
@@ -172,7 +172,7 @@ function handlePropertyChange(nativeEvent) {
 }
 
 function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {
-  if (topLevelType === TOP_FOCUS) {
+  if (topLevelType === TOP_FOCUS_IN) {
     // In IE9, propertychange fires for most input events but is buggy and
     // doesn't fire when text is deleted, but conveniently, selectionchange
     // appears to fire in all of the remaining cases so we catch those and
@@ -185,7 +185,7 @@ function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {
     // missed a blur event somehow.
     stopWatchingForValueChange();
     startWatchingForValueChange(target, targetInst);
-  } else if (topLevelType === TOP_BLUR) {
+  } else if (topLevelType === TOP_FOCUS_OUT) {
     stopWatchingForValueChange();
   }
 }
@@ -304,7 +304,7 @@ function extractEvents(
   }
 
   // When blurring, set the value attribute for number inputs
-  if (topLevelType === TOP_BLUR) {
+  if (topLevelType === TOP_FOCUS_OUT) {
     handleControlledInputBlur(((targetNode: any): HTMLInputElement));
   }
 }

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

@@ -12,10 +12,10 @@ import shallowEqual from 'shared/shallowEqual';
 
 import {registerTwoPhaseEvent} from '../EventRegistry';
 import {
-  TOP_BLUR,
+  TOP_FOCUS_OUT,
   TOP_CONTEXT_MENU,
   TOP_DRAG_END,
-  TOP_FOCUS,
+  TOP_FOCUS_IN,
   TOP_KEY_DOWN,
   TOP_KEY_UP,
   TOP_MOUSE_DOWN,
@@ -35,10 +35,10 @@ const skipSelectionChangeEvent =
   canUseDOM && 'documentMode' in document && document.documentMode <= 11;
 
 const rootTargetDependencies = [
-  TOP_BLUR,
+  TOP_FOCUS_OUT,
   TOP_CONTEXT_MENU,
   TOP_DRAG_END,
-  TOP_FOCUS,
+  TOP_FOCUS_IN,
   TOP_KEY_DOWN,
   TOP_KEY_UP,
   TOP_MOUSE_DOWN,
@@ -186,7 +186,7 @@ function extractEvents(
 
   switch (topLevelType) {
     // Track the input node that has focus.
-    case TOP_FOCUS:
+    case TOP_FOCUS_IN:
       if (
         isTextInputElement(targetNode) ||
         targetNode.contentEditable === 'true'
@@ -196,7 +196,7 @@ function extractEvents(
         lastSelection = null;
       }
       break;
-    case TOP_BLUR:
+    case TOP_FOCUS_OUT:
       activeElement = null;
       activeElementInst = null;
       lastSelection = null;

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

@@ -70,8 +70,8 @@ function extractEvents(
     case DOMTopLevelEventTypes.TOP_KEY_UP:
       EventConstructor = SyntheticKeyboardEvent;
       break;
-    case DOMTopLevelEventTypes.TOP_BLUR:
-    case DOMTopLevelEventTypes.TOP_FOCUS:
+    case DOMTopLevelEventTypes.TOP_FOCUS_IN:
+    case DOMTopLevelEventTypes.TOP_FOCUS_OUT:
     case DOMTopLevelEventTypes.TOP_BEFORE_BLUR:
     case DOMTopLevelEventTypes.TOP_AFTER_BLUR:
       EventConstructor = SyntheticFocusEvent;

packages/react-interactions/events/src/dom/create-event-handle/Focus.js

@@ -126,7 +126,6 @@ function handleGlobalFocusVisibleEvent(
 }
 
 const passiveObject = {passive: true};
-const passiveObjectWithPriority = {passive: true, priority: 0};
 
 function handleFocusVisibleTargetEvent(
   type: string,
@@ -243,8 +242,8 @@ export function useFocus(
 ): void {
   // Setup controlled state for this useFocus hook
   const stateRef = useRef({isFocused: false, isFocusVisible: false});
-  const focusHandle = useEvent('focusin', passiveObjectWithPriority);
-  const blurHandle = useEvent('focusout', passiveObjectWithPriority);
+  const focusHandle = useEvent('focusin', passiveObject);
+  const blurHandle = useEvent('focusout', passiveObject);
   const focusVisibleHandles = useFocusVisibleInputHandles();
 
   useEffect(() => {
@@ -334,8 +333,8 @@ export function useFocusWithin(
   const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
     {isFocused: false, isFocusVisible: false},
   );
-  const focusHandle = useEvent('focusin', passiveObjectWithPriority);
-  const blurHandle = useEvent('focusout', passiveObjectWithPriority);
+  const focusHandle = useEvent('focusin', passiveObject);
+  const blurHandle = useEvent('focusout', passiveObject);
   const afterBlurHandle = useEvent('afterblur', passiveObject);
   const beforeBlurHandle = useEvent('beforeblur', passiveObject);
   const focusVisibleHandles = useFocusVisibleInputHandles();
@@ -397,7 +396,7 @@ export function useFocusWithin(
           if (disabled) {
             return;
           }
-          const {relatedTarget} = (event.nativeEvent: any);
+          const {relatedTarget} = (event: any);
 
           if (
             state.isFocused &&