TypeError: Cannot set property 'initialValue' of null. ReactDOMSelect.postUpdateWrapper

[browniefed]

Issue

Using latest .14.7 I'm running into an issue error with select and ReactDOMSelect:158 when navigating away from one place to another place which is causing a select to throw even though it should and is unmounted.

Error being: TypeError: Cannot set property 'initialValue' of null at Object.ReactDOMSelect.postUpdateWrapper (http://localhost:3992/assets/js/main.js:22153:38)

Other reports of this happening are here redux-form/redux-form#321

Setup

Currently integrating into an app in pieces, So I render our Router into an empty container that renders components that render into their appropriate DOM containers.

Seemingly the error?

I've narrowed it down to calling unmountComponentAtNode(this.section) which occurs in a componentDidUpdate. I removed it and the error stops happening.

I realize that mounting to an existing node that is a React root will cause an unmount and mount the correct things.

Repro

I've attempted to reproduce it but no luck at the moment even though I've narrowed it down to the unmountComponentAtNode call.

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?

Stack Trace

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

My code causing the issue looks like so.

import React, { Component, PropTypes } from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { Provider } from "react-redux";
import ApplicationsRenderer from "./applications";

let getContainer = () =>  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(
        <Provider store={store}>
          <Container router={router} key={Container} />
        </Provider>,
        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
}

[jimfb]

At first glance, I suspect this is probably a duplicate of #3298

Without a repro, there really isn't a whole lot we can do from our end.

Since I suspect it's a duplicate of #3298, and since there is nothing actionable on our end (since we can't repro your issue issue), I'm going to close this out. If you're able to find a good repro (jsfiddle), let me know and we can reopen/reinvestigate.

[browniefed]

@jimfb sounds good, thanks for pointing me to those issues. I'll spend some more time later attempting to create a reproduction and when I do I'll reopen.

[LKay]

@browniefed Were you able to figure out what's causing the problem and how to fix it? I'm facing the same problem. I have some nested components and one containing select is being rerendered (unmounted and mounted again with new props). I'm constantly getting the error mentioned above.

When I remove select completely but render it's wrapper component everything works fine.

[browniefed]

@LKay No, not entirely. Not using unmountComponentAtNode and instead just calling ReadDOM.render with the new component at the same DOM container and it worked fine, it was seemingly just the sync mounting issue. I moved pretty quickly and now converted things over to a full react app so I don't have any more integration work to do.

[kevinluvian]

@jimfb there's a repro here redux-form/redux-form#321
could you please take a look?