<h2 dir="auto">Issue</h2>
<p dir="auto">Using latest .14.7 I'm running into an issue error with select and <code class="notranslate">ReactDOMSelect:158</code> when navigating away from one place to another place which is causing a select to throw even though it should and is unmounted.</p>
<p dir="auto">Error being: <code class="notranslate">TypeError: Cannot set property 'initialValue' of null at Object.ReactDOMSelect.postUpdateWrapper (http://localhost:3992/assets/js/main.js:22153:38)</code></p>
<p dir="auto">Other reports of this happening are here <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="118261422" data-permission-text="Title is private" data-url="https://github.com/redux-form/redux-form/issues/321" data-hovercard-type="issue" data-hovercard-url="/redux-form/redux-form/issues/321/hovercard" href="https://github.com/redux-form/redux-form/issues/321">redux-form/redux-form#321</a></p>
<h2 dir="auto">Setup</h2>
<p dir="auto">Currently integrating into an app in pieces, So I render our <code class="notranslate">Router</code> into an empty container that renders components that render into their appropriate DOM containers.</p>
<h2 dir="auto">Seemingly the error?</h2>
<p dir="auto">I've narrowed it down to calling <code class="notranslate">unmountComponentAtNode(this.section)</code> which occurs in a <code class="notranslate">componentDidUpdate</code>. I removed it and the error stops happening.</p>
<p dir="auto">I realize that mounting to an existing node that is a React root will cause an unmount and mount the correct things.</p>
<h2 dir="auto">Repro</h2>
<p dir="auto">I've attempted to reproduce it but no luck at the moment even though I've narrowed it down to the <code class="notranslate">unmountComponentAtNode</code> call.</p>
<p dir="auto">The click is originating in a different ReactDOM.render container so I'm not sure if it is an eventing thing where clicks from different ReactDOM roots are applying to everywhere else?</p>
<h2 dir="auto">Stack Trace</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ReactDOMSelect.postUpdateWrapper (ReactDOMSelect.js:158)
postUpdateSelectWrapper (ReactDOMComponent.js:303)
assign.notifyAll (CallbackQueue.js:65)
ON_DOM_READY_QUEUEING.close (ReactReconcileT…nsaction.js:81)
Mixin.closeAll (Transaction.js:202)
Mixin.perform (Transaction.js:149)
Mixin.perform (Transaction.js:136)
assign.perform (ReactUpdates.js:86)
flushBatchedUpdates (ReactUpdates.js:147)
ReactUpdates_flushBatchedUpdates (ReactPerf.js:66)
Mixin.closeAll (Transaction.js:202)
Mixin.perform (Transaction.js:149)
ReactDefaultBatchingStrategy.batchedUpdates (ReactDefaultBat…Strategy.js:62)
batchedUpdates (ReactUpdates.js:94)
ReactEventListener.dispatchEvent (ReactEventListener.js:204) //Mouse click event of me clicking on a different container render."><pre class="notranslate"><code class="notranslate">ReactDOMSelect.postUpdateWrapper (ReactDOMSelect.js:158)
postUpdateSelectWrapper (ReactDOMComponent.js:303)
assign.notifyAll (CallbackQueue.js:65)
ON_DOM_READY_QUEUEING.close (ReactReconcileT…nsaction.js:81)
Mixin.closeAll (Transaction.js:202)
Mixin.perform (Transaction.js:149)
Mixin.perform (Transaction.js:136)
assign.perform (ReactUpdates.js:86)
flushBatchedUpdates (ReactUpdates.js:147)
ReactUpdates_flushBatchedUpdates (ReactPerf.js:66)
Mixin.closeAll (Transaction.js:202)
Mixin.perform (Transaction.js:149)
ReactDefaultBatchingStrategy.batchedUpdates (ReactDefaultBat…Strategy.js:62)
batchedUpdates (ReactUpdates.js:94)
ReactEventListener.dispatchEvent (ReactEventListener.js:204) //Mouse click event of me clicking on a different container render.
</code></pre></div>
<h2 dir="auto">Code</h2>
<p dir="auto">My code causing the issue looks like so.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, { Component, PropTypes } from &quot;react&quot;;
import { render, unmountComponentAtNode } from &quot;react-dom&quot;;
import { Provider } from &quot;react-redux&quot;;
import ApplicationsRenderer from &quot;./applications&quot;;

let getContainer = () =&gt;  document.getElementById('dashboard-body');

export default class DashboardRenderer extends Component {

  constructor(props, context) {
    super(props, context);
    this.renderIntoContainer = this.renderIntoContainer.bind(this);
  }
  componentDidMount() {
    this.renderIntoContainer();
  }

  renderIntoContainer() {
    let { store, container: Container } = this.props.route;
    let { router } = this.context;
    this.section = getContainer();
    if (this.section) {
        unmountComponentAtNode(this.section)
        render(
        &lt;Provider store={store}&gt;
          &lt;Container router={router} key={Container} /&gt;
        &lt;/Provider&gt;,
        this.section
      );
    }
  }

  componentDidUpdate(prevProps) {
    let { container } = this.props.route;
    let { container: prevContainer } = prevProps.route;

    if (container !== prevContainer) {
      this.renderIntoContainer();
    }
  }

  componentWillUnmount() {
    unmountComponentAtNode(this.section)
  }

  render() {
    return null;
  }
}

DashboardRenderer.contextTypes = {
  router: PropTypes.object
}
"><pre class="notranslate"><code class="notranslate">import React, { Component, PropTypes } from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { Provider } from "react-redux";
import ApplicationsRenderer from "./applications";

let getContainer = () =&gt;  document.getElementById('dashboard-body');

export default class DashboardRenderer extends Component {

  constructor(props, context) {
    super(props, context);
    this.renderIntoContainer = this.renderIntoContainer.bind(this);
  }
  componentDidMount() {
    this.renderIntoContainer();
  }

  renderIntoContainer() {
    let { store, container: Container } = this.props.route;
    let { router } = this.context;
    this.section = getContainer();
    if (this.section) {
        unmountComponentAtNode(this.section)
        render(
        &lt;Provider store={store}&gt;
          &lt;Container router={router} key={Container} /&gt;
        &lt;/Provider&gt;,
        this.section
      );
    }
  }

  componentDidUpdate(prevProps) {
    let { container } = this.props.route;
    let { container: prevContainer } = prevProps.route;

    if (container !== prevContainer) {
      this.renderIntoContainer();
    }
  }

  componentWillUnmount() {
    unmountComponentAtNode(this.section)
  }

  render() {
    return null;
  }
}

DashboardRenderer.contextTypes = {
  router: PropTypes.object
}

</code></pre></div>
<p dir="auto">Hi,</p>
<p dir="auto">When trying to unmount my whole app, I got some error.</p>
<blockquote>
<p dir="auto">Uncaught TypeError: Cannot read property 'firstChild' of undefined<br>
ReactMount.js:606ReactMount.findComponentRoot<br>
ReactMount.js:606ReactMount.findReactNodeByID ReactMount.js:552getNode<br>
ReactMount.js:128executeDispatch EventPluginUtils.js:109SimpleEventPlugin.executeDispatch<br>
SimpleEventPlugin.js:305forEachEventDispatch EventPluginUtils.js:95executeDispatchesInOrder<br>
EventPluginUtils.js:119executeDispatchesAndRelease EventPluginHub.js:46forEachAccumulated<br>
forEachAccumulated.js:25EventPluginHub.processEventQueue<br>
EventPluginHub.js:251runEventQueueInBatch<br>
ReactEventEmitterMixin.js:18ReactEventEmitterMixin.handleTopLevel<br>
ReactEventEmitterMixin.js:44handleTopLevelImpl ReactEventListener.js:80Mixin.perform<br>
Transaction.js:134ReactDefaultBatchingStrategy.batchedUpdates<br>
ReactDefaultBatchingStrategy.js:66batchedUpdates<br>
ReactUpdates.js:109ReactEventListener.dispatchEvent ReactEventListener.js:175</p>
</blockquote>
<p dir="auto">I think it's not a big deal.</p>
<p dir="auto">According to what I see with the debugger, it seems to be because a <code class="notranslate">SyntheticMouseEvent</code> is trying to get dispatched. And I guess the target has just been unmounted...</p>
<p dir="auto">Note that my use case looks like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var Hello = React.createClass({
    render: function() {
        return &lt;div onClick={unmount}&gt;Hello {this.props.name}&lt;/div&gt;;
    }
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">Hello</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-en">render</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">unmount</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>Hello <span class="pl-kos">{</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">When using an <code class="notranslate">unmount</code> synchronous implementation, I get this error.<br>
When adding a setTimeout 0 in the unmount code, I got no error.</p>
<p dir="auto">I could not reproduce this in a jsfiddle, but I guess it's probably because I don't really know how batching work in React.</p>