Redux-Form with Modal

Issue description

• components: Modal
• reactstrap version 5.0.0-alpha.4
• import method es (if umd, are you using the “full” version (only for v5+)?)
• react version 16.2.0
• bootstrap version 4.0.0
• react-redux: 5.0.6,
• redux-form": 7.2.3,
• redux: 3.7.2,

What is happening?

The error below occurs when you have a redux form compenent inside of reactrap modal component. I think the issue lies in the destroy function of Model.js I think you need to add this._dialog = null;

If you don’t when you show() again you render with a null this._element.

destroy() {
    if (this._element) {
      ReactDOM.unmountComponentAtNode(this._element);
      document.body.removeChild(this._element);
      this._element = null;
+     this._dialog = null; 
    }

   ... omitted ...
}

What should be happening?

No error

Steps to reproduce issue

Put a react-redux form inside of a Modal. Open it, close, it then open it again. I could be simply empbeding the form wrong, because i cannot reproduce the problem on a codepen.

Error message in console

Uncaught Error: Target container is not a DOM element.
    at invariant (:3001/static/js/bundle.js:35142)
    at renderSubtreeIntoContainer (:3001/static/js/bundle.js:183261)
    at Object.unstable_renderSubtreeIntoContainer (:3001/static/js/bundle.js:183375)
    at Modal.renderIntoSubtree (:3001/static/js/bundle.js:221599)
    at Modal.hide (:3001/static/js/bundle.js:221547)
    at Modal.togglePortal (:3001/static/js/bundle.js:221526)
    at Modal.componentDidUpdate (:3001/static/js/bundle.js:221467)
    at commitLifeCycles (:3001/static/js/bundle.js:176859)
    at commitAllLifeCycles (:3001/static/js/bundle.js:178027)
    at HTMLUnknownElement.callCallback (:3001/static/js/bundle.js:168623)
    at Object.invokeGuardedCallbackDev (:3001/static/js/bundle.js:168662)
    at invokeGuardedCallback (:3001/static/js/bundle.js:168519)
    at commitRoot (:3001/static/js/bundle.js:178131)
    at performWorkOnRoot (:3001/static/js/bundle.js:179098)
    at performWork (:3001/static/js/bundle.js:179048)
    at batchedUpdates (:3001/static/js/bundle.js:179167)
    at batchedUpdates (:3001/static/js/bundle.js:170411)
    at dispatchEvent (:3001/static/js/bundle.js:171502)

Code

<Form> </Form>

[tudorgergely]

Found a workaround for this @njbannister15 (or anyone else interested):

You can basically destroy the component after each render by using this (inside render):

return (<div>
    {this.state.isOpen && <Modal isOpen={this.state.isOpen}>
         ...
    </Modal>}
<div>);

You can use this as a workaround until this issue is really fixed.

[supergibbs]

Seems like the recent update to react-popper broke the build (sorry). It’s limited to v0.8.2 though so master can be built locally by:

yarn add react-popper@0.8.1
yarn build