{"commit":{"authoredAt":"2019-05-16T19:03:38+01:00","authorName":"Dominic Gannaway","shortRevision":"1160b37691","authorEmail":"trueadm@users.noreply.github.com","subject":"Event API: Add responder allowMultipleHostChildren flag (#15646)","revision":"1160b37691d32c9bf385b7e7d7a106adce05c7df"},"body":"","patch":"diff --git a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\nindex 8834a21d59..85483a24f1 100644\n--- a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n@@ -16,8 +16,6 @@ import {\n EventComponent,\n EventTarget as EventTargetWorkTag,\n HostComponent,\n- SuspenseComponent,\n- Fragment,\n } from 'shared\/ReactWorkTags';\n import type {\n ReactEventResponder,\n@@ -34,6 +32,10 @@ import warning from 'shared\/warning';\n import {enableEventAPI} from 'shared\/ReactFeatureFlags';\n import {invokeGuardedCallbackAndCatchFirstError} from 'shared\/ReactErrorUtils';\n import invariant from 'shared\/invariant';\n+import {\n+ isFiberSuspenseAndTimedOut,\n+ getSuspenseFallbackChild,\n+} from 'react-reconciler\/src\/ReactFiberEvents';\n \n import {getClosestInstanceFromNode} from '..\/client\/ReactDOMComponentTree';\n \n@@ -351,50 +353,11 @@ const eventResponderContext: ReactResponderContext = {\n validateResponderContext();\n const focusableElements = [];\n const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);\n- let node = ((eventComponentInstance.currentFiber: any): Fiber).child;\n-\n- while (node !== null) {\n- if (node.tag === SuspenseComponent) {\n- const suspendedChild = isFiberSuspenseAndTimedOut(node)\n- ? getSuspenseFallbackChild(node)\n- : getSuspenseChild(node);\n- if (suspendedChild !== null) {\n- node = suspendedChild;\n- continue;\n- }\n- } else {\n- if (isFiberHostComponentFocusable(node)) {\n- focusableElements.push(node.stateNode);\n- } else {\n- const child = node.child;\n+ const child = ((eventComponentInstance.currentFiber: any): Fiber).child;\n \n- if (child !== null) {\n- node = child;\n- continue;\n- }\n- }\n- }\n- const sibling = node.sibling;\n-\n- if (sibling !== null) {\n- node = sibling;\n- continue;\n- }\n- let parent;\n- if (isFiberSuspenseChild(node)) {\n- parent = getSuspenseFiberFromChild(node);\n- } else {\n- parent = node.return;\n- if (parent === null) {\n- break;\n- }\n- }\n- if (parent.stateNode === currentInstance) {\n- break;\n- }\n- node = parent.sibling;\n+ if (child !== null) {\n+ collectFocusableElements(child, focusableElements);\n }\n-\n return focusableElements;\n },\n getActiveDocument,\n@@ -455,6 +418,33 @@ const eventResponderContext: ReactResponderContext = {\n },\n };\n \n+function collectFocusableElements(\n+ node: Fiber,\n+ focusableElements: Array,\n+): void {\n+ if (isFiberSuspenseAndTimedOut(node)) {\n+ const fallbackChild = getSuspenseFallbackChild(node);\n+ if (fallbackChild !== null) {\n+ collectFocusableElements(fallbackChild, focusableElements);\n+ }\n+ } else {\n+ if (isFiberHostComponentFocusable(node)) {\n+ focusableElements.push(node.stateNode);\n+ } else {\n+ const child = node.child;\n+\n+ if (child !== null) {\n+ collectFocusableElements(child, focusableElements);\n+ }\n+ }\n+ }\n+ const sibling = node.sibling;\n+\n+ if (sibling !== null) {\n+ collectFocusableElements(sibling, focusableElements);\n+ }\n+}\n+\n function isTargetWithinEventComponent(target: Element | Document): boolean {\n validateResponderContext();\n if (target != null) {\n@@ -605,41 +595,6 @@ export function processEventQueue(): void {\n }\n }\n \n-function isFiberSuspenseAndTimedOut(fiber: Fiber): boolean {\n- return fiber.tag === SuspenseComponent && fiber.memoizedState !== null;\n-}\n-\n-function isFiberSuspenseChild(fiber: Fiber | null): boolean {\n- if (fiber === null) {\n- return false;\n- }\n- const parent = fiber.return;\n- if (parent !== null && parent.tag === Fragment) {\n- const grandParent = parent.return;\n-\n- if (\n- grandParent !== null &&\n- grandParent.tag === SuspenseComponent &&\n- grandParent.stateNode !== null\n- ) {\n- return true;\n- }\n- }\n- return false;\n-}\n-\n-function getSuspenseFiberFromChild(fiber: Fiber): Fiber {\n- return ((((fiber.return: any): Fiber).return: any): Fiber);\n-}\n-\n-function getSuspenseFallbackChild(fiber: Fiber): Fiber | null {\n- return ((((fiber.child: any): Fiber).sibling: any): Fiber).child;\n-}\n-\n-function getSuspenseChild(fiber: Fiber): Fiber | null {\n- return (((fiber.child: any): Fiber): Fiber).child;\n-}\n-\n function getTargetEventTypesSet(\n eventTypes: Array,\n ): Set {\ndiff --git a\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js b\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\nindex 40ecaaeba7..922dff8246 100644\n--- a\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/DOMEventResponderSystem-test.internal.js\n@@ -13,7 +13,7 @@ let React;\n let ReactFeatureFlags;\n let ReactDOM;\n \n-function createReactEventComponent(\n+function createReactEventComponent({\n targetEventTypes,\n rootEventTypes,\n createInitialState,\n@@ -24,7 +24,8 @@ function createReactEventComponent(\n onUnmount,\n onOwnershipChange,\n stopLocalPropagation,\n-) {\n+ allowMultipleHostChildren,\n+}) {\n const testEventResponder = {\n targetEventTypes,\n rootEventTypes,\n@@ -36,6 +37,7 @@ function createReactEventComponent(\n onUnmount,\n onOwnershipChange,\n stopLocalPropagation: stopLocalPropagation || false,\n+ allowMultipleHostChildren: allowMultipleHostChildren || false,\n };\n \n return {\n@@ -81,11 +83,9 @@ describe('DOMEventResponderSystem', () => {\n let eventLog = [];\n const buttonRef = React.createRef();\n \n- const ClickEventComponent = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props) => {\n+ const ClickEventComponent = createReactEventComponent({\n+ targetEventTypes: ['click'],\n+ onEvent: (event, context, props) => {\n eventResponderFiredCount++;\n eventLog.push({\n name: event.type,\n@@ -94,7 +94,7 @@ describe('DOMEventResponderSystem', () => {\n phase: 'bubble',\n });\n },\n- (event, context, props) => {\n+ onEventCapture: (event, context, props) => {\n eventResponderFiredCount++;\n eventLog.push({\n name: event.type,\n@@ -103,7 +103,7 @@ describe('DOMEventResponderSystem', () => {\n phase: 'capture',\n });\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -155,11 +155,9 @@ describe('DOMEventResponderSystem', () => {\n let eventLog = [];\n const buttonRef = React.createRef();\n \n- const ClickEventComponent = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props) => {\n+ const ClickEventComponent = createReactEventComponent({\n+ targetEventTypes: ['click'],\n+ onEvent: (event, context, props) => {\n eventLog.push({\n name: event.type,\n passive: event.passive,\n@@ -167,7 +165,7 @@ describe('DOMEventResponderSystem', () => {\n phase: 'bubble',\n });\n },\n- (event, context, props) => {\n+ onEventCapture: (event, context, props) => {\n eventLog.push({\n name: event.type,\n passive: event.passive,\n@@ -175,7 +173,7 @@ describe('DOMEventResponderSystem', () => {\n phase: 'capture',\n });\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -210,11 +208,9 @@ describe('DOMEventResponderSystem', () => {\n let eventLog = [];\n const buttonRef = React.createRef();\n \n- const ClickEventComponent = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props) => {\n+ const ClickEventComponent = createReactEventComponent({\n+ targetEventTypes: ['click'],\n+ onEvent: (event, context, props) => {\n eventResponderFiredCount++;\n eventLog.push({\n name: event.type,\n@@ -223,7 +219,7 @@ describe('DOMEventResponderSystem', () => {\n phase: 'bubble',\n });\n },\n- (event, context, props) => {\n+ onEventCapture: (event, context, props) => {\n eventResponderFiredCount++;\n eventLog.push({\n name: event.type,\n@@ -232,7 +228,7 @@ describe('DOMEventResponderSystem', () => {\n phase: 'capture',\n });\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -282,29 +278,25 @@ describe('DOMEventResponderSystem', () => {\n let eventLog = [];\n const buttonRef = React.createRef();\n \n- const ClickEventComponentA = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props) => {\n+ const ClickEventComponentA = createReactEventComponent({\n+ targetEventTypes: ['click'],\n+ onEvent: (event, context, props) => {\n eventLog.push(`A [bubble]`);\n },\n- (event, context, props) => {\n+ onEventCapture: (event, context, props) => {\n eventLog.push(`A [capture]`);\n },\n- );\n+ });\n \n- const ClickEventComponentB = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props) => {\n+ const ClickEventComponentB = createReactEventComponent({\n+ targetEventTypes: ['click'],\n+ onEvent: (event, context, props) => {\n eventLog.push(`B [bubble]`);\n },\n- (event, context, props) => {\n+ onEventCapture: (event, context, props) => {\n eventLog.push(`B [capture]`);\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -332,21 +324,16 @@ describe('DOMEventResponderSystem', () => {\n let eventLog = [];\n const buttonRef = React.createRef();\n \n- const ClickEventComponent = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props) => {\n+ const ClickEventComponent = createReactEventComponent({\n+ targetEventTypes: ['click'],\n+ onEvent: (event, context, props) => {\n eventLog.push(`${props.name} [bubble]`);\n },\n- (event, context, props) => {\n+ onEventCapture: (event, context, props) => {\n eventLog.push(`${props.name} [capture]`);\n },\n- undefined,\n- undefined,\n- undefined,\n- false,\n- );\n+ stopLocalPropagation: false,\n+ });\n \n const Test = () => (\n \n@@ -374,22 +361,16 @@ describe('DOMEventResponderSystem', () => {\n let eventLog = [];\n const buttonRef = React.createRef();\n \n- const ClickEventComponent = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props) => {\n+ const ClickEventComponent = createReactEventComponent({\n+ targetEventTypes: ['click'],\n+ onEvent: (event, context, props) => {\n eventLog.push(`${props.name} [bubble]`);\n },\n- (event, context, props) => {\n+ onEventCapture: (event, context, props) => {\n eventLog.push(`${props.name} [capture]`);\n },\n- undefined,\n- undefined,\n- undefined,\n- undefined,\n- true,\n- );\n+ stopLocalPropagation: true,\n+ });\n \n const Test = () => (\n \n@@ -412,11 +393,9 @@ describe('DOMEventResponderSystem', () => {\n let eventLog = [];\n const buttonRef = React.createRef();\n \n- const ClickEventComponent = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props) => {\n+ const ClickEventComponent = createReactEventComponent({\n+ targetEventTypes: ['click'],\n+ onEvent: (event, context, props) => {\n if (props.onMagicClick) {\n const syntheticEvent = {\n target: event.target,\n@@ -429,7 +408,7 @@ describe('DOMEventResponderSystem', () => {\n });\n }\n },\n- (event, context, props) => {\n+ onEventCapture: (event, context, props) => {\n if (props.onMagicClick) {\n const syntheticEvent = {\n target: event.target,\n@@ -442,7 +421,7 @@ describe('DOMEventResponderSystem', () => {\n });\n }\n },\n- );\n+ });\n \n function handleMagicEvent(e) {\n eventLog.push('magic event fired', e.type, e.phase);\n@@ -510,17 +489,15 @@ describe('DOMEventResponderSystem', () => {\n }, 500);\n }\n \n- const LongPressEventComponent = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props) => {\n+ const LongPressEventComponent = createReactEventComponent({\n+ targetEventTypes: ['click'],\n+ onEvent: (event, context, props) => {\n handleEvent(event, context, props, 'bubble');\n },\n- (event, context, props) => {\n+ onEventCapture: (event, context, props) => {\n handleEvent(event, context, props, 'capture');\n },\n- );\n+ });\n \n function log(msg) {\n eventLog.push(msg);\n@@ -555,17 +532,12 @@ describe('DOMEventResponderSystem', () => {\n it('the event responder onMount() function should fire', () => {\n let onMountFired = 0;\n \n- const EventComponent = createReactEventComponent(\n- [],\n- undefined,\n- undefined,\n- undefined,\n- undefined,\n- undefined,\n- () => {\n+ const EventComponent = createReactEventComponent({\n+ targetEventTypes: [],\n+ onMount: () => {\n onMountFired++;\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -580,18 +552,12 @@ describe('DOMEventResponderSystem', () => {\n it('the event responder onUnmount() function should fire', () => {\n let onUnmountFired = 0;\n \n- const EventComponent = createReactEventComponent(\n- [],\n- undefined,\n- undefined,\n- undefined,\n- undefined,\n- undefined,\n- undefined,\n- () => {\n+ const EventComponent = createReactEventComponent({\n+ targetEventTypes: [],\n+ onUnmount: () => {\n onUnmountFired++;\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -607,20 +573,15 @@ describe('DOMEventResponderSystem', () => {\n it('the event responder onUnmount() function should fire with state', () => {\n let counter = 0;\n \n- const EventComponent = createReactEventComponent(\n- [],\n- undefined,\n- () => ({\n+ const EventComponent = createReactEventComponent({\n+ targetEventTypes: [],\n+ createInitialState: () => ({\n incrementAmount: 5,\n }),\n- undefined,\n- undefined,\n- undefined,\n- undefined,\n- (context, props, state) => {\n+ onUnmount: (context, props, state) => {\n counter += state.incrementAmount;\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -638,21 +599,15 @@ describe('DOMEventResponderSystem', () => {\n let ownershipGained = false;\n const buttonRef = React.createRef();\n \n- const EventComponent = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props, state) => {\n+ const EventComponent = createReactEventComponent({\n+ targetEventTypes: ['click'],\n+ onEvent: (event, context, props, state) => {\n ownershipGained = context.requestGlobalOwnership();\n },\n- undefined,\n- undefined,\n- undefined,\n- undefined,\n- () => {\n+ onOwnershipChange: () => {\n onOwnershipChangeFired++;\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -675,13 +630,9 @@ describe('DOMEventResponderSystem', () => {\n let eventResponderFiredCount = 0;\n let eventLog = [];\n \n- const ClickEventComponent = createReactEventComponent(\n- undefined,\n- ['click'],\n- undefined,\n- undefined,\n- undefined,\n- event => {\n+ const ClickEventComponent = createReactEventComponent({\n+ rootEventTypes: ['click'],\n+ onRootEvent: event => {\n eventResponderFiredCount++;\n eventLog.push({\n name: event.type,\n@@ -690,7 +641,7 @@ describe('DOMEventResponderSystem', () => {\n phase: 'root',\n });\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -720,17 +671,16 @@ describe('DOMEventResponderSystem', () => {\n const divRef = React.createRef();\n const log = [];\n \n- const EventComponent = createReactEventComponent(\n- ['pointerout'],\n- undefined,\n- undefined,\n- (event, context) => {\n+ const EventComponent = createReactEventComponent({\n+ targetEventTypes: ['pointerout'],\n+ onEvent: (event, context) => {\n const isWithin = context.isTargetWithinEventResponderScope(\n event.nativeEvent.relatedTarget,\n );\n log.push(isWithin);\n },\n- );\n+ allowMultipleHostChildren: true,\n+ });\n \n const Test = () => (\n \n@@ -769,11 +719,9 @@ describe('DOMEventResponderSystem', () => {\n let eventLog = [];\n const buttonRef = React.createRef();\n \n- const ClickEventComponent1 = createReactEventComponent(\n- [{name: 'click', passive: false, capture: false}],\n- undefined,\n- undefined,\n- event => {\n+ const ClickEventComponent1 = createReactEventComponent({\n+ targetEventTypes: [{name: 'click', passive: false, capture: false}],\n+ onEvent: event => {\n clickEventComponent1Fired++;\n eventLog.push({\n name: event.type,\n@@ -781,13 +729,11 @@ describe('DOMEventResponderSystem', () => {\n passiveSupported: event.passiveSupported,\n });\n },\n- );\n+ });\n \n- const ClickEventComponent2 = createReactEventComponent(\n- [{name: 'click', passive: true, capture: false}],\n- undefined,\n- undefined,\n- event => {\n+ const ClickEventComponent2 = createReactEventComponent({\n+ targetEventTypes: [{name: 'click', passive: true, capture: false}],\n+ onEvent: event => {\n clickEventComponent2Fired++;\n eventLog.push({\n name: event.type,\n@@ -795,7 +741,7 @@ describe('DOMEventResponderSystem', () => {\n passiveSupported: event.passiveSupported,\n });\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -832,13 +778,9 @@ describe('DOMEventResponderSystem', () => {\n let clickEventComponent2Fired = 0;\n let eventLog = [];\n \n- const ClickEventComponent1 = createReactEventComponent(\n- undefined,\n- [{name: 'click', passive: false, capture: false}],\n- undefined,\n- undefined,\n- undefined,\n- event => {\n+ const ClickEventComponent1 = createReactEventComponent({\n+ rootEventTypes: [{name: 'click', passive: false, capture: false}],\n+ onRootEvent: event => {\n clickEventComponent1Fired++;\n eventLog.push({\n name: event.type,\n@@ -846,15 +788,11 @@ describe('DOMEventResponderSystem', () => {\n passiveSupported: event.passiveSupported,\n });\n },\n- );\n+ });\n \n- const ClickEventComponent2 = createReactEventComponent(\n- undefined,\n- [{name: 'click', passive: true, capture: false}],\n- undefined,\n- undefined,\n- undefined,\n- event => {\n+ const ClickEventComponent2 = createReactEventComponent({\n+ rootEventTypes: [{name: 'click', passive: true, capture: false}],\n+ onRootEvent: event => {\n clickEventComponent2Fired++;\n eventLog.push({\n name: event.type,\n@@ -862,7 +800,7 @@ describe('DOMEventResponderSystem', () => {\n passiveSupported: event.passiveSupported,\n });\n },\n- );\n+ });\n \n const Test = () => (\n \n@@ -896,13 +834,9 @@ describe('DOMEventResponderSystem', () => {\n });\n \n it('the event responder system should warn on accessing invalid properties', () => {\n- const ClickEventComponent = createReactEventComponent(\n- undefined,\n- ['click'],\n- undefined,\n- undefined,\n- undefined,\n- (event, context, props) => {\n+ const ClickEventComponent = createReactEventComponent({\n+ rootEventTypes: ['click'],\n+ onRootEvent: (event, context, props) => {\n const syntheticEvent = {\n target: event.target,\n type: 'click',\n@@ -912,7 +846,7 @@ describe('DOMEventResponderSystem', () => {\n discrete: true,\n });\n },\n- );\n+ });\n \n let handler;\n const Test = () => (\n@@ -989,4 +923,131 @@ describe('DOMEventResponderSystem', () => {\n \n expect(container.innerHTML).toBe('

dillon1000/react

Files changed