{"body":"Renderers can queue commit effects for initial mount","files":[{"status":"M","path":"scripts\/fiber\/tests-passing.txt"},{"status":"M","path":"src\/renderers\/art\/ReactARTFiber.js"},{"status":"M","path":"src\/renderers\/dom\/fiber\/ReactDOMFiber.js"},{"status":"M","path":"src\/renderers\/dom\/fiber\/ReactDOMFiberComponent.js"},{"status":"M","path":"src\/renderers\/dom\/shared\/__tests__\/ReactDOM-test.js"},{"status":"M","path":"src\/renderers\/native\/ReactNativeFiber.js"},{"status":"M","path":"src\/renderers\/noop\/ReactNoop.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberReconciler.js"},{"status":"M","path":"src\/renderers\/shared\/fiber\/ReactFiberScheduler.js"}],"parents":["9e461c715cb22523764b37c783fd37cf9b878fb5","a10131304b59abf68a234f0bc75f38a7bb4013a7"],"patch":"diff --git a\/scripts\/fiber\/tests-passing.txt b\/scripts\/fiber\/tests-passing.txt\nindex cb3f467467..c56a44b5b2 100644\n--- a\/scripts\/fiber\/tests-passing.txt\n+++ b\/scripts\/fiber\/tests-passing.txt\n@@ -621,6 +621,7 @@ src\/renderers\/dom\/shared\/__tests__\/ReactDOM-test.js\n * should purge the DOM cache when removing nodes\n * allow React.DOM factories to be called without warnings\n * preserves focus\n+* calls focus() on autoFocus elements after they have been mounted to the DOM\n \n src\/renderers\/dom\/shared\/__tests__\/ReactDOMComponent-test.js\n * should handle className\ndiff --git a\/src\/renderers\/art\/ReactARTFiber.js b\/src\/renderers\/art\/ReactARTFiber.js\nindex 6244642a84..4c3f22ea05 100644\n--- a\/src\/renderers\/art\/ReactARTFiber.js\n+++ b\/src\/renderers\/art\/ReactARTFiber.js\n@@ -414,6 +414,10 @@ const ARTRenderer = ReactFiberReconciler({\n \/\/ Noop\n },\n \n+ commitMount(instance, type, newProps) {\n+ \/\/ Noop\n+ },\n+\n commitUpdate(instance, type, oldProps, newProps) {\n instance._applyProps(instance, newProps, oldProps);\n },\n@@ -457,7 +461,7 @@ const ARTRenderer = ReactFiberReconciler({\n },\n \n finalizeInitialChildren(domElement, type, props) {\n- \/\/ Noop\n+ return false;\n },\n \n insertBefore(parentInstance, child, beforeChild) {\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\nindex 3b6330db66..20d851dcee 100644\n--- a\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiber.js\n@@ -96,6 +96,20 @@ function validateContainer(container) {\n }\n }\n \n+function shouldAutoFocusHostComponent(\n+ type : string,\n+ props : Props,\n+) : boolean {\n+ switch (type) {\n+ case 'button':\n+ case 'input':\n+ case 'select':\n+ case 'textarea':\n+ return !!(props : any).autoFocus;\n+ }\n+ return false;\n+}\n+\n var DOMRenderer = ReactFiberReconciler({\n \n getRootHostContext(rootContainerInstance : Container) : HostContext {\n@@ -173,8 +187,9 @@ var DOMRenderer = ReactFiberReconciler({\n type : string,\n props : Props,\n rootContainerInstance : Container,\n- ) : void {\n+ ) : boolean {\n setInitialProperties(domElement, type, props, rootContainerInstance);\n+ return shouldAutoFocusHostComponent(type, props);\n },\n \n prepareUpdate(\n@@ -197,6 +212,18 @@ var DOMRenderer = ReactFiberReconciler({\n return true;\n },\n \n+ commitMount(\n+ domElement : Instance,\n+ type : string,\n+ newProps : Props,\n+ rootContainerInstance : Container,\n+ internalInstanceHandle : Object,\n+ ) : void {\n+ if (shouldAutoFocusHostComponent(type, newProps)) {\n+ (domElement : any).focus();\n+ }\n+ },\n+\n commitUpdate(\n domElement : Instance,\n type : string,\ndiff --git a\/src\/renderers\/dom\/fiber\/ReactDOMFiberComponent.js b\/src\/renderers\/dom\/fiber\/ReactDOMFiberComponent.js\nindex 49ed51cad9..f583cfc5e0 100644\n--- a\/src\/renderers\/dom\/fiber\/ReactDOMFiberComponent.js\n+++ b\/src\/renderers\/dom\/fiber\/ReactDOMFiberComponent.js\n@@ -27,7 +27,6 @@ var ReactDOMFiberTextarea = require('ReactDOMFiberTextarea');\n var { getCurrentFiberOwnerName } = require('ReactDebugCurrentFiber');\n \n var emptyFunction = require('emptyFunction');\n-var focusNode = require('focusNode');\n var invariant = require('invariant');\n var isEventSupported = require('isEventSupported');\n var setInnerHTML = require('setInnerHTML');\n@@ -605,36 +604,18 @@ var ReactDOMFiberComponent = {\n isCustomComponentTag\n );\n \n- \/\/ TODO: All these autoFocus won't work because the component is not in the\n- \/\/ DOM yet. We need a special effect to handle this.\n switch (tag) {\n case 'input':\n \/\/ TODO: Make sure we check if this is still unmounted or do any clean\n \/\/ up necessary since we never stop tracking anymore.\n inputValueTracking.trackNode((domElement : any));\n ReactDOMFiberInput.postMountWrapper(domElement, rawProps);\n- if (props.autoFocus) {\n- focusNode(domElement);\n- }\n break;\n case 'textarea':\n \/\/ TODO: Make sure we check if this is still unmounted or do any clean\n \/\/ up necessary since we never stop tracking anymore.\n inputValueTracking.trackNode((domElement : any));\n ReactDOMFiberTextarea.postMountWrapper(domElement, rawProps);\n- if (props.autoFocus) {\n- focusNode(domElement);\n- }\n- break;\n- case 'select':\n- if (props.autoFocus) {\n- focusNode(domElement);\n- }\n- break;\n- case 'button':\n- if (props.autoFocus) {\n- focusNode(domElement);\n- }\n break;\n case 'option':\n ReactDOMFiberOption.postMountWrapper(domElement, rawProps);\ndiff --git a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOM-test.js b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOM-test.js\nindex d9bbe6c106..a569abd37f 100644\n--- a\/src\/renderers\/dom\/shared\/__tests__\/ReactDOM-test.js\n+++ b\/src\/renderers\/dom\/shared\/__tests__\/ReactDOM-test.js\n@@ -235,4 +235,37 @@ describe('ReactDOM', () => {\n ]);\n document.body.removeChild(container);\n });\n+\n+ it('calls focus() on autoFocus elements after they have been mounted to the DOM', () => {\n+ const originalFocus = HTMLElement.prototype.focus;\n+\n+ try {\n+ let focusedElement;\n+ let inputFocusedAfterMount = false;\n+\n+ \/\/ This test needs to determine that focus is called after mount.\n+ \/\/ Can't check document.activeElement because PhantomJS is too permissive;\n+ \/\/ It doesn't require element to be in the DOM to be focused.\n+ HTMLElement.prototype.focus = function() {\n+ focusedElement = this;\n+ inputFocusedAfterMount = !!this.parentNode;\n+ };\n+\n+ const container = document.createElement('div');\n+ document.body.appendChild(container);\n+ ReactDOM.render(\n+

\n+

Auto-focus Test<\/h1>\n+ \n+
The above input should be focused after mount.<\/p>\n+ <\/div>,\n+ container,\n+ );\n+\n+ expect(inputFocusedAfterMount).toBe(true);\n+ expect(focusedElement.tagName).toBe('INPUT');\n+ } finally {\n+ HTMLElement.prototype.focus = originalFocus;\n+ }\n+ });\n });\ndiff --git a\/src\/renderers\/native\/ReactNativeFiber.js b\/src\/renderers\/native\/ReactNativeFiber.js\nindex 1ca5d6e4b1..2c0ce2573a 100644\n--- a\/src\/renderers\/native\/ReactNativeFiber.js\n+++ b\/src\/renderers\/native\/ReactNativeFiber.js\n@@ -110,6 +110,16 @@ const NativeRenderer = ReactFiberReconciler({\n );\n },\n \n+ commitMount(\n+ instance : Instance,\n+ type : string,\n+ newProps : Props,\n+ rootContainerInstance : Object,\n+ internalInstanceHandle : Object\n+ ) : void {\n+ \/\/ Noop\n+ },\n+\n commitUpdate(\n instance : Instance,\n type : string,\n@@ -197,7 +207,7 @@ const NativeRenderer = ReactFiberReconciler({\n type : string,\n props : Props,\n rootContainerInstance : Container,\n- ) : void {\n+ ) : boolean {\n \/\/ Map from child objects to native tags.\n \/\/ Either way we need to pass a copy of the Array to prevent it from being frozen.\n const nativeTags = parentInstance._children.map(\n@@ -210,6 +220,8 @@ const NativeRenderer = ReactFiberReconciler({\n parentInstance._nativeTag, \/\/ containerTag\n nativeTags \/\/ reactTags\n );\n+\n+ return false;\n },\n \n getRootHostContext() {\ndiff --git a\/src\/renderers\/noop\/ReactNoop.js b\/src\/renderers\/noop\/ReactNoop.js\nindex b668cc9d88..804aba156f 100644\n--- a\/src\/renderers\/noop\/ReactNoop.js\n+++ b\/src\/renderers\/noop\/ReactNoop.js\n@@ -70,14 +70,18 @@ var NoopRenderer = ReactFiberReconciler({\n parentInstance.children.push(child);\n },\n \n- finalizeInitialChildren(domElement : Instance, type : string, props : Props) : void {\n- \/\/ Noop\n+ finalizeInitialChildren(domElement : Instance, type : string, props : Props) : boolean {\n+ return false;\n },\n \n prepareUpdate(instance : Instance, type : string, oldProps : Props, newProps : Props) : boolean {\n return true;\n },\n \n+ commitMount(instance : Instance, type : string, newProps : Props) : void {\n+ \/\/ Noop\n+ },\n+\n commitUpdate(instance : Instance, type : string, oldProps : Props, newProps : Props) : void {\n instance.prop = newProps.prop;\n },\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\nindex 879fcf2485..bb56a4c78f 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCommitWork.js\n@@ -40,6 +40,7 @@ module.exports = function(\n ) {\n \n const {\n+ commitMount,\n commitUpdate,\n resetTextContent,\n commitTextUpdate,\n@@ -434,6 +435,21 @@ module.exports = function(\n case HostComponent: {\n const instance : I = finishedWork.stateNode;\n attachRef(current, finishedWork, instance);\n+\n+ \/\/ Renderers may schedule work to be done after host components are mounted\n+ \/\/ (eg DOM renderer may schedule auto-focus for inputs and form controls).\n+ \/\/ These effects should only be committed when components are first mounted,\n+ \/\/ aka when there is no current\/alternate.\n+ if (\n+ !current &&\n+ finishedWork.effectTag & Update\n+ ) {\n+ const type = finishedWork.type;\n+ const props = finishedWork.memoizedProps;\n+ const rootContainerInstance = getRootHostContainer();\n+ commitMount(instance, type, props, rootContainerInstance, finishedWork);\n+ }\n+\n return;\n }\n case HostText: {\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\nindex c0f41ab4c8..bffecb3c46 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberCompleteWork.js\n@@ -239,8 +239,15 @@ module.exports = function(\n currentHostContext,\n workInProgress\n );\n+\n appendAllChildren(instance, workInProgress);\n- finalizeInitialChildren(instance, type, newProps, rootContainerInstance);\n+\n+ \/\/ Certain renderers require commit-time effects for initial mount.\n+ \/\/ (eg DOM renderer supports auto-focus for certain elements).\n+ \/\/ Make sure such renderers get scheduled for later work.\n+ if (finalizeInitialChildren(instance, type, newProps, rootContainerInstance)) {\n+ workInProgress.effectTag |= Update;\n+ }\n \n workInProgress.stateNode = instance;\n if (workInProgress.ref) {\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\nindex e05e668134..ff55cbddaa 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberReconciler.js\n@@ -50,10 +50,11 @@ export type HostConfig = {\n \n createInstance(type : T, props : P, rootContainerInstance : C, hostContext : CX, internalInstanceHandle : OpaqueNode) : I,\n appendInitialChild(parentInstance : I, child : I | TI) : void,\n- finalizeInitialChildren(parentInstance : I, type : T, props : P, rootContainerInstance : C) : void,\n+ finalizeInitialChildren(parentInstance : I, type : T, props : P, rootContainerInstance : C) : boolean,\n \n prepareUpdate(instance : I, type : T, oldProps : P, newProps : P, hostContext : CX) : boolean,\n commitUpdate(instance : I, type : T, oldProps : P, newProps : P, rootContainerInstance : C, internalInstanceHandle : OpaqueNode) : void,\n+ commitMount(instance : I, type : T, newProps : P, rootContainerInstance : C, internalInstanceHandle : OpaqueNode) : void,\n \n shouldSetTextContent(props : P) : boolean,\n resetTextContent(instance : I) : void,\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\nindex 5f203409f9..63cea47ee4 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactFiberScheduler.js\n@@ -371,6 +371,7 @@ module.exports = function(config : HostConfig

dillon1000/react

Files changed