[react-events] Keyboard responder propagation handling (#16657)

Author: trueadm

packages/legacy-events/ReactGenericBatching.js

@@ -11,8 +11,6 @@ import {
 }from'./ReactControlledComponent';
 import{enableFlareAPI}from'shared/ReactFeatureFlags';
 
-import{invokeGuardedCallbackAndCatchFirstError}from'shared/ReactErrorUtils';
-
 // Used as a way to call batchedUpdates when we don't have a reference to
 // the renderer. Such as when we're dispatching events or if third party
 // libraries need to call batchedUpdates. Eventually, this API will go away when
@@ -77,12 +75,12 @@ export function batchedEventUpdates(fn, a, b) {
 }
 }
 
-exportfunctionexecuteUserEventHandler(fn: any=>void,value: any){
+// This is for the React Flare event system
+exportfunctionexecuteUserEventHandler(fn: any=>void,value: any): any{
 constpreviouslyInEventHandler=isInsideEventHandler;
 try{
 isInsideEventHandler=true;
-consttype=typeofvalue==='object'&&value!==null ? value.type : '';
-invokeGuardedCallbackAndCatchFirstError(type,fn,undefined,value);
+returnfn(value);
 }finally{
 isInsideEventHandler=previouslyInEventHandler;
 }

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

@@ -76,42 +76,45 @@ const rootEventTypesToEventResponderInstances: Map<
 Set<ReactDOMEventResponderInstance>,
 >=newMap();
 
+typePropagationBehavior=0|1;
+
+constDoNotPropagateToNextResponder=0;
+constPropagateToNextResponder=1;
+
 letcurrentTimeStamp=0;
 letcurrentTimers=newMap();
 let currentInstance: null|ReactDOMEventResponderInstance=null;
 letcurrentTimerIDCounter=0;
 let currentDocument: null|Document=null;
+let currentPropagationBehavior: PropagationBehavior=DoNotPropagateToNextResponder;
 let currentTargetFiber: null|Fiber=null;
 
 consteventResponderContext: ReactDOMResponderContext={
 dispatchEvent(
 eventValue: any,
 eventListener: any=>void,
 eventPriority: EventPriority,
-): void{
+): any{
 validateResponderContext();
 validateEventValue(eventValue);
 switch(eventPriority){
 case DiscreteEvent: {
 flushDiscreteUpdatesIfNeeded(currentTimeStamp);
-discreteUpdates(()=>
+returndiscreteUpdates(()=>
 executeUserEventHandler(eventListener,eventValue),
 );
-break;
 }
 case UserBlockingEvent: {
 if(enableUserBlockingEvents){
-runWithPriority(UserBlockingPriority,()=>
+returnrunWithPriority(UserBlockingPriority,()=>
 executeUserEventHandler(eventListener,eventValue),
 );
 }else{
-executeUserEventHandler(eventListener,eventValue);
+returnexecuteUserEventHandler(eventListener,eventValue);
 }
-break;
 }
 case ContinuousEvent: {
-executeUserEventHandler(eventListener,eventValue);
-break;
+returnexecuteUserEventHandler(eventListener,eventValue);
 }
 }
 },
@@ -266,6 +269,9 @@ const eventResponderContext: ReactDOMResponderContext = {
 }
 returnfalse;
 },
+continuePropagation(){
+currentPropagationBehavior=PropagateToNextResponder;
+},
 enqueueStateRestore,
 getCurrentTarget(): Element|null{
 validateResponderContext();
@@ -489,6 +495,10 @@ function traverseAndHandleEventResponderInstances(
 if(onEvent!==null){
 currentInstance=responderInstance;
 onEvent(responderEvent,eventResponderContext,props,state);
+if(currentPropagationBehavior===PropagateToNextResponder){
+visitedResponders.delete(responder);
+currentPropagationBehavior=DoNotPropagateToNextResponder;
+}
 }
 }
 }
@@ -588,7 +598,9 @@ export function dispatchEventForResponderEventSystem(
 constpreviousTimers=currentTimers;
 constpreviousTimeStamp=currentTimeStamp;
 constpreviousDocument=currentDocument;
+constpreviousPropagationBehavior=currentPropagationBehavior;
 constpreviousTargetFiber=currentTargetFiber;
+currentPropagationBehavior=DoNotPropagateToNextResponder;
 currentTimers=null;
 currentTargetFiber=targetFiber;
 // nodeType 9 is DOCUMENT_NODE
@@ -613,6 +625,7 @@ export function dispatchEventForResponderEventSystem(
 currentInstance=previousInstance;
 currentTimeStamp=previousTimeStamp;
 currentDocument=previousDocument;
+currentPropagationBehavior=previousPropagationBehavior;
 currentTargetFiber=previousTargetFiber;
 }
 }

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

@@ -174,7 +174,14 @@ function dispatchKeyboardEvent(
 type,
 defaultPrevented,
 );
-context.dispatchEvent(syntheticEvent,listener,DiscreteEvent);
+constshouldPropagate=context.dispatchEvent(
+syntheticEvent,
+listener,
+DiscreteEvent,
+);
+if(shouldPropagate){
+context.continuePropagation();
+}
 }
 
 constkeyboardResponderImpl={

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

@@ -251,4 +251,88 @@ describe('Keyboard event responder', () => {
 );
 });
 });
+
+describe('correctly handles responder propagation',()=>{
+describe('onKeyDown',()=>{
+letonKeyDownInner,onKeyDownOuter,ref;
+
+functionrenderPropagationTest(propagates){
+onKeyDownInner=jest.fn(()=>propagates);
+onKeyDownOuter=jest.fn();
+ref=React.createRef();
+constComponent=()=>{
+constlistenerInner=useKeyboard({
+onKeyDown: onKeyDownInner,
+});
+constlistenerOuter=useKeyboard({
+onKeyDown: onKeyDownOuter,
+});
+return(
+<divlisteners={listenerOuter}>
+<divref={ref}listeners={listenerInner}/>
+</div>
+);
+};
+ReactDOM.render(<Component/>,container);
+}
+
+it('propagates when cb returns true',()=>{
+renderPropagationTest(true);
+consttarget=createEventTarget(ref.current);
+target.keydown();
+expect(onKeyDownInner).toBeCalled();
+expect(onKeyDownOuter).toBeCalled();
+});
+
+it('does not propagate when cb returns false',()=>{
+renderPropagationTest(false);
+consttarget=createEventTarget(ref.current);
+target.keydown();
+expect(onKeyDownInner).toBeCalled();
+expect(onKeyDownOuter).not.toBeCalled();
+});
+});
+
+describe('onKeyUp',()=>{
+letonKeyUpInner,onKeyUpOuter,ref;
+
+functionrenderPropagationTest(propagates){
+onKeyUpInner=jest.fn(()=>propagates);
+onKeyUpOuter=jest.fn();
+ref=React.createRef();
+constComponent=()=>{
+constlistenerInner=useKeyboard({
+onKeyUp: onKeyUpInner,
+});
+constlistenerOuter=useKeyboard({
+onKeyUp: onKeyUpOuter,
+});
+return(
+<divlisteners={listenerOuter}>
+<divref={ref}listeners={listenerInner}/>
+</div>
+);
+};
+ReactDOM.render(<Component/>,container);
+}
+
+it('propagates when cb returns true',()=>{
+renderPropagationTest(true);
+consttarget=createEventTarget(ref.current);
+target.keydown();
+target.keyup();
+expect(onKeyUpInner).toBeCalled();
+expect(onKeyUpOuter).toBeCalled();
+});
+
+it('does not propagate when cb returns false',()=>{
+renderPropagationTest(false);
+consttarget=createEventTarget(ref.current);
+target.keydown();
+target.keyup();
+expect(onKeyUpInner).toBeCalled();
+expect(onKeyUpOuter).not.toBeCalled();
+});
+});
+});
 });

packages/shared/ReactDOMTypes.js

@@ -72,6 +72,7 @@ export type ReactDOMResponderContext = {
 target: Element|Document,
 elementType: string,
 )=>boolean,
+continuePropagation(): void,
 // Used for controller components
 enqueueStateRestore(Element|Document): void,
 getCurrentTarget(): Element|null,