Focus side effect type added; auto-focus moved to commit phase

Auto-focus was previously managed by ReactDOMFiberComponent.setInitialProperties which was called during the complete phase. This did not work because host components are not yet present in the DOM until the entire tree has been mounted which happens during the commit phase. This changeset moves focus management to the latter part of commit and tracks it via a new side effect type, .
I was able to reproduce the failing focus before in a browser and verify this fix. However it was a bit awkward to catch in a unit test because PhantomJS does not require DOM elements to be mounted in order to track their focused state. I've added a test that fails before and passes after, but it's kind of a hack.
As a side note I see that we are still using the focusNode helper mehtod in a few places. It seems like this is no longer neceessary since we dropped IE8 support early 2016. I did not remove it in this commit though since it's done in a few places.

Author: Brian Vaughn

scripts/fiber/tests-passing.txt

@@ -620,6 +620,7 @@ src/renderers/dom/shared/__tests__/ReactDOM-test.js
 * should purge the DOM cache when removing nodes
 * allow React.DOM factories to be called without warnings
 * preserves focus
+* calls focus() on autoFocus elements after they have been mounted to the DOM
 
 src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
 * should handle className

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -27,7 +27,6 @@ var ReactDOMFiberTextarea = require('ReactDOMFiberTextarea');
 var { getCurrentFiberOwnerName } = require('ReactDebugCurrentFiber');
 
 var emptyFunction = require('emptyFunction');
-var focusNode = require('focusNode');
 var invariant = require('invariant');
 var isEventSupported = require('isEventSupported');
 var setInnerHTML = require('setInnerHTML');
@@ -605,36 +604,18 @@ var ReactDOMFiberComponent = {
       isCustomComponentTag
     );
 
-    // TODO: All these autoFocus won't work because the component is not in the
-    // DOM yet. We need a special effect to handle this.
     switch (tag) {
       case 'input':
         // TODO: Make sure we check if this is still unmounted or do any clean
         // up necessary since we never stop tracking anymore.
         inputValueTracking.trackNode((domElement : any));
         ReactDOMFiberInput.postMountWrapper(domElement, rawProps);
-        if (props.autoFocus) {
-          focusNode(domElement);
-        }
         break;
       case 'textarea':
         // TODO: Make sure we check if this is still unmounted or do any clean
         // up necessary since we never stop tracking anymore.
         inputValueTracking.trackNode((domElement : any));
         ReactDOMFiberTextarea.postMountWrapper(domElement, rawProps);
-        if (props.autoFocus) {
-          focusNode(domElement);
-        }
-        break;
-      case 'select':
-        if (props.autoFocus) {
-          focusNode(domElement);
-        }
-        break;
-      case 'button':
-        if (props.autoFocus) {
-          focusNode(domElement);
-        }
         break;
       case 'option':
         ReactDOMFiberOption.postMountWrapper(domElement, rawProps);

src/renderers/dom/shared/__tests__/ReactDOM-test.js

@@ -235,4 +235,36 @@ describe('ReactDOM', () => {
     ]);
     document.body.removeChild(container);
   });
+
+  it('calls focus() on autoFocus elements after they have been mounted to the DOM', () => {
+    const originalFocus = HTMLElement.prototype.focus;
+
+    try {
+      let focusedElement;
+      let inputFocusedAfterMount = false;
+
+      // This test needs to determine that focus is called after mount.
+      // We can't just check document.activeElement because PhantomJS is too permissive.
+      HTMLElement.prototype.focus = function() {
+        focusedElement = this;
+        inputFocusedAfterMount = !!this.parentNode;
+      };
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      ReactDOM.render(
+        <div>
+          <h1>Auto-focus Test</h1>
+          <input autoFocus id='input'/>
+          <p>The above input should be focused after mount.</p>
+        </div>,
+        container,
+      );
+
+      expect(focusedElement.tagName).toBe('INPUT');
+      expect(inputFocusedAfterMount).toBe(true);
+    } finally {
+      HTMLElement.prototype.focus = originalFocus;
+    }
+  });
 });

src/renderers/shared/fiber/ReactFiberCompleteWork.js

@@ -39,6 +39,7 @@ var {
   Fragment,
 } = ReactTypeOfWork;
 var {
+  Focus,
   Update,
 } = ReactTypeOfSideEffect;
 
@@ -239,6 +240,20 @@ module.exports = function<T, P, I, TI, C, CX>(
             currentHostContext,
             workInProgress
           );
+
+          // A component cannot be focused until it's mounted.
+          // Flag components with autoFocus for later work.
+          switch (type) {
+            case 'button':
+            case 'input':
+            case 'select':
+            case 'textarea':
+              if (newProps.autoFocus) {
+                workInProgress.effectTag |= Focus;
+              }
+              break;
+          }
+
           appendAllChildren(instance, workInProgress);
           finalizeInitialChildren(instance, type, newProps, rootContainerInstance);
 

src/renderers/shared/fiber/ReactFiberScheduler.js

@@ -17,6 +17,7 @@ import type { FiberRoot } from 'ReactFiberRoot';
 import type { HostConfig, Deadline } from 'ReactFiberReconciler';
 import type { PriorityLevel } from 'ReactPriorityLevel';
 
+var focusNode = require('focusNode');
 var {
   popContextProvider,
 } = require('ReactFiberContext');
@@ -41,6 +42,7 @@ var {
 } = require('ReactPriorityLevel');
 
 var {
+  Focus,
   NoEffect,
   Placement,
   Update,
@@ -286,6 +288,12 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C
   function commitAllLifeCycles() {
     while (nextEffect) {
       const current = nextEffect.alternate;
+
+      // Auto-focus host components once they have been mounted.
+      if (nextEffect.effectTag & Focus) {
+        focusNode(nextEffect.stateNode);
+      }
+
       // Use Task priority for lifecycle updates
       if (nextEffect.effectTag & (Update | Callback)) {
         commitLifeCycles(current, nextEffect);
@@ -371,6 +379,8 @@ module.exports = function<T, P, I, TI, C, CX>(config : HostConfig<T, P, I, TI, C
     // In the second pass we'll perform all life-cycles and ref callbacks.
     // Life-cycles happen as a separate pass so that all placements, updates,
     // and deletions in the entire tree have already been invoked.
+    // This pass also manages focus since components must be in the DOM first,
+    // And this does not happen untilt he entire tree is mounted.
     nextEffect = firstEffect;
     while (nextEffect) {
       try {

src/renderers/shared/fiber/ReactTypeOfSideEffect.js

@@ -12,15 +12,16 @@
 
 'use strict';
 
-export type TypeOfSideEffect = 0 | 1 | 2 | 3 | 4 | 8 | 16 | 32;
+export type TypeOfSideEffect = 0 | 1 | 2 | 3 | 4 | 8 | 16 | 32 | 64;
 
 module.exports = {
-  NoEffect: 0,                                // 0b000000
-  Placement: 1,                               // 0b000001
-  Update: 2,                                  // 0b000010
-  PlacementAndUpdate: 3,                      // 0b000011
-  Deletion: 4,                                // 0b000100
-  ContentReset: 8,                            // 0b001000
-  Callback: 16,                               // 0b010000
-  Err: 32,                                    // 0b100000
+  NoEffect: 0,                                // 0b0000000
+  Placement: 1,                               // 0b0000001
+  Update: 2,                                  // 0b0000010
+  PlacementAndUpdate: 3,                      // 0b0000011
+  Deletion: 4,                                // 0b0000100
+  ContentReset: 8,                            // 0b0001000
+  Callback: 16,                               // 0b0010000
+  Focus: 32,                                  // 0b0100000
+  Err: 64,                                    // 0b1000000
 };