fix: don't compare native event types with react event types

Author: eps1lon

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 ->rootpath.
 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-interactions/events/src/dom/create-event-handle/Focus.js

@@ -200,8 +200,8 @@ export function useFocus(
 conststateRef=useRef<null|{isFocused: boolean,isFocusVisible: boolean}>(
 {isFocused: false,isFocusVisible: false},
 );
-constfocusHandle=useEvent('focus',passiveObjectWithPriority);
-constblurHandle=useEvent('blur',passiveObjectWithPriority);
+constfocusHandle=useEvent('focusin',passiveObjectWithPriority);
+constblurHandle=useEvent('focusout',passiveObjectWithPriority);
 constfocusVisibleHandles=useFocusVisibleInputHandles();
 
 useLayoutEffect(()=>{
@@ -297,8 +297,8 @@ export function useFocusWithin<T>(
 conststateRef=useRef<null|{isFocused: boolean,isFocusVisible: boolean}>(
 {isFocused: false,isFocusVisible: false},
 );
-constfocusHandle=useEvent('focus',passiveObjectWithPriority);
-constblurHandle=useEvent('blur',passiveObjectWithPriority);
+constfocusHandle=useEvent('focusin',passiveObjectWithPriority);
+constblurHandle=useEvent('focusout',passiveObjectWithPriority);
 constafterBlurHandle=useEvent('afterblur',passiveObject);
 constbeforeBlurHandle=useEvent('beforeblur',passiveObject);
 constfocusVisibleHandles=useFocusVisibleInputHandles();

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

@@ -91,7 +91,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
 useFocus(ref,{
  onBlur,
 });
-return<divref={ref}onBlur={()=>{}}onFocus={()=>{}}/>;
+return<divref={ref}/>;
 };
 ReactDOM.render(<Component/>,container);
 Scheduler.unstable_flushAll();
@@ -119,7 +119,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
  onFocus,
 });
 return(
-<divref={ref}onFocus={()=>{}}>
+<divref={ref}>
 <aref={innerRef}/>
 </div>
 );
@@ -158,7 +158,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
 });
 return(
 <divref={ref}>
-<divref={innerRef}onBlur={()=>{}}onFocus={()=>{}}/>
+<divref={innerRef}/>
 </div>
 );
 };
@@ -201,7 +201,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
  onFocusVisibleChange,
 });
 return(
-<divref={ref}onBlur={()=>{}}onFocus={()=>{}}>
+<divref={ref}>
 <divref={innerRef}/>
 </div>
 );
@@ -295,7 +295,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
 onFocusChange: createEventHandler('outer: onFocusChange'),
 });
 return(
-<divref={outerRef}onBlur={()=>{}}onFocus={()=>{}}>
+<divref={outerRef}>
 <Inner/>
 </div>
 );