{"body":"","commit":{"subject":"Event API: Add `FocusScope` surface (#15487)","revision":"64e3da286f2c1e66303d2ae1dc06276b2f866e9d","shortRevision":"64e3da286f","authorEmail":"trueadm@users.noreply.github.com","authoredAt":"2019-04-25T02:01:09+01:00","authorName":"Dominic Gannaway"},"patch":"diff --git a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\nindex 9a87f14737..9aed034d03 100644\n--- a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n@@ -84,6 +84,8 @@ const eventListeners:\n ($Shape) => void,\n > = new PossiblyWeakMap();\n \n+let alreadyDispatching = false;\n+\n let currentTimers = new Map();\n let currentOwner = null;\n let currentInstance: null | ReactEventComponentInstance = null;\n@@ -322,61 +324,65 @@ const eventResponderContext: ReactResponderContext = {\n }\n }\n },\n- getEventTargetsFromTarget(\n- target: Element | Document,\n- queryType?: Symbol | number,\n- queryKey?: string,\n- ): Array<{\n- node: Element,\n- props: null | Object,\n- }> {\n- validateResponderContext();\n- const eventTargetHostComponents = [];\n- let node = getClosestInstanceFromNode(target);\n- \/\/ We traverse up the fiber tree from the target fiber, to the\n- \/\/ current event component fiber. Along the way, we check if\n- \/\/ the fiber has any children that are event targets. If there\n- \/\/ are, we query them (optionally) to ensure they match the\n- \/\/ specified type and key. We then push the event target props\n- \/\/ along with the associated parent host component of that event\n- \/\/ target.\n+ getFocusableElementsInScope(): Array {\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.stateNode === currentInstance) {\n break;\n }\n- let child = node.child;\n-\n- while (child !== null) {\n- if (\n- child.tag === EventTargetWorkTag &&\n- queryEventTarget(child, queryType, queryKey)\n- ) {\n- const props = child.stateNode.props;\n- let parent = child.return;\n-\n- if (parent !== null) {\n- if (parent.stateNode === currentInstance) {\n- break;\n- }\n- if (parent.tag === HostComponent) {\n- eventTargetHostComponents.push({\n- node: parent.stateNode,\n- props,\n- });\n- break;\n- }\n- parent = parent.return;\n- }\n- break;\n+ if (isFiberHostComponentFocusable(node)) {\n+ focusableElements.push(node.stateNode);\n+ } else {\n+ const child = node.child;\n+\n+ if (child !== null) {\n+ node = child;\n+ continue;\n }\n- child = child.sibling;\n }\n- node = node.return;\n+ const sibling = node.sibling;\n+\n+ if (sibling !== null) {\n+ node = sibling;\n+ continue;\n+ }\n+ const parent = node.return;\n+ if (parent === null) {\n+ break;\n+ }\n+ node = parent.sibling;\n }\n- return eventTargetHostComponents;\n+\n+ return focusableElements;\n },\n };\n \n+function isFiberHostComponentFocusable(fiber: Fiber): boolean {\n+ if (fiber.tag !== HostComponent) {\n+ return false;\n+ }\n+ const {type, memoizedProps} = fiber;\n+ if (memoizedProps.tabIndex === -1 || memoizedProps.disabled) {\n+ return false;\n+ }\n+ if (memoizedProps.tabIndex === 0) {\n+ return true;\n+ }\n+ if (type === 'a' || type === 'area') {\n+ return !!memoizedProps.href;\n+ }\n+ return (\n+ type === 'button' ||\n+ type === 'textarea' ||\n+ type === 'input' ||\n+ type === 'object' ||\n+ type === 'select'\n+ );\n+}\n+\n function processTimers(timers: Map): void {\n const timersArr = Array.from(timers.values());\n currentEventQueue = createEventQueue();\n@@ -398,20 +404,6 @@ function processTimers(timers: Map): void {\n }\n }\n \n-function queryEventTarget(\n- child: Fiber,\n- queryType: void | Symbol | number,\n- queryKey: void | string,\n-): boolean {\n- if (queryType !== undefined && child.type.type !== queryType) {\n- return false;\n- }\n- if (queryKey !== undefined && child.key !== queryKey) {\n- return false;\n- }\n- return true;\n-}\n-\n function createResponderEvent(\n topLevelType: string,\n nativeEvent: AnyNativeEvent,\n@@ -467,7 +459,7 @@ export function processEventQueue(): void {\n }\n }\n \n-function getTargetEventTypes(\n+function getTargetEventTypesSet(\n eventTypes: Array,\n ): Set {\n let cachedSet = targetEventTypeCached.get(eventTypes);\n@@ -497,12 +489,13 @@ function getTargetEventResponderInstances(\n const eventComponentInstance = node.stateNode;\n if (currentOwner === null || currentOwner === eventComponentInstance) {\n const responder = eventComponentInstance.responder;\n+ const targetEventTypes = responder.targetEventTypes;\n \/\/ Validate the target event type exists on the responder\n- const targetEventTypes = getTargetEventTypes(\n- responder.targetEventTypes,\n- );\n- if (targetEventTypes.has(topLevelType)) {\n- eventResponderInstances.push(eventComponentInstance);\n+ if (targetEventTypes !== undefined) {\n+ const targetEventTypesSet = getTargetEventTypesSet(targetEventTypes);\n+ if (targetEventTypesSet.has(topLevelType)) {\n+ eventResponderInstances.push(eventComponentInstance);\n+ }\n }\n }\n }\n@@ -716,6 +709,10 @@ export function dispatchEventForResponderEventSystem(\n eventSystemFlags: EventSystemFlags,\n ): void {\n if (enableEventAPI) {\n+ if (alreadyDispatching) {\n+ return;\n+ }\n+ alreadyDispatching = true;\n currentEventQueue = createEventQueue();\n try {\n traverseAndHandleEventResponderInstances(\n@@ -730,6 +727,7 @@ export function dispatchEventForResponderEventSystem(\n currentTimers = null;\n currentInstance = null;\n currentEventQueue = null;\n+ alreadyDispatching = false;\n }\n }\n }\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 f85f003f1f..dfb20db7a0 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@@ -12,7 +12,6 @@\n let React;\n let ReactFeatureFlags;\n let ReactDOM;\n-let ReactSymbols;\n \n function createReactEventComponent(\n targetEventTypes,\n@@ -57,14 +56,6 @@ function dispatchClickEvent(element) {\n dispatchEvent(element, 'click');\n }\n \n-function createReactEventTarget(type) {\n- return {\n- $$typeof: ReactSymbols.REACT_EVENT_TARGET_TYPE,\n- displayName: 'TestEventTarget',\n- type,\n- };\n-}\n-\n \/\/ This is a new feature in Fiber so I put it in its own test file. It could\n \/\/ probably move to one of the other test files once it is official.\n describe('DOMEventResponderSystem', () => {\n@@ -78,7 +69,6 @@ describe('DOMEventResponderSystem', () => {\n ReactDOM = require('react-dom');\n container = document.createElement('div');\n document.body.appendChild(container);\n- ReactSymbols = require('shared\/ReactSymbols');\n });\n \n afterEach(() => {\n@@ -676,235 +666,6 @@ describe('DOMEventResponderSystem', () => {\n expect(onOwnershipChangeFired).toEqual(1);\n });\n \n- it('should be possible to get event targets', () => {\n- let queryResult = null;\n- const buttonRef = React.createRef();\n- const divRef = React.createRef();\n- const eventTargetType = Symbol.for('react.event_target.test');\n- const EventTarget = createReactEventTarget(eventTargetType);\n-\n- const EventComponent = createReactEventComponent(\n- ['click'],\n- undefined,\n- undefined,\n- (event, context, props, state) => {\n- queryResult = Array.from(\n- context.getEventTargetsFromTarget(event.target),\n- );\n- },\n- );\n-\n- const Test = () => (\n- \n-

\n- \n-

dillon1000/react

Files changed