Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at Modal.destroy

[devmarwen]

Issue description

• components: Modal
• reactstrap version #5.0.0-beta.3
• import method es (if umd, are you using the "full" version (only for v5+)?)
• react version #16.2.0
• bootstrap version #4.0.0

What is happening?

Error when unmounting Modal route.

Steps to reproduce issue

1. Create the route

        <Switch>
          <Route
            exact
            path={`${this.props.match.path}/nw`}
            render={(props) => (
              <ComponentAsAModal
                one="two"
                {...props}
              />
            )}
          />
        </Switch>

2. The Component

// The component
class ComponentAsAModal extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: true,
    };
  }

  goBack = () => {
    // Transition to another route. Apparently this is the cause
    // of the error. If wrapped in `setTimeout` the error vanishes.
    this.props.dispatch(push('/some-other-route'));
  };

  close = (e) => {
    this.setState({ visible: false });
  };

  render() {
    return (
      <Modal
        toggle={this.close}
        isOpen={this.state.visible}
        onClosed={this.goBack}
      >
      Modal Content
      </Modal>
    );
  }
}

3. Click on the backdrop to trigger the transition in goBack func.

Error message in console

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at Modal.destroy

function destroy() {
   // this line fails because of `this._element`. Idealy we should test if 
   // `this._element` exists before executing `document.body.removeChild`
   document.body.removeChild(this._element);
   this._element = null;
   // rest of the code
}

[virgofx]

Good catch, I'll fix this in PR #916 - We do check for existing of element in all the other components, just need to add the one liner here. Thanks for reporting!

[fantua]

@virgofx I'm not sure is that fix correct, maybe removing class from body need to be wrapped in that if too.

@devmarwen can you reproduce your error in codesandbox?

[fantua]

@TheSharpieOne hmm, ok. Just created a new bug: https://codesandbox.io/s/9890x3mjmo

Take a look at console output, body class is removing 2 times after Modal closing 😞

[TheSharpieOne]

Try 5.0.0. I [re-]added some extra logic in 6ec3174 to ensure a modal only adds and removes the classname it adds once (well, ensure it doesn't add multiple and remove multiple)

Multiple modals will still add multiple, but this helps each individual modal keeps track of the one it added and remove it when needed.

[efstathiosntonas]

Using material-ui select dropdown on top of Modal, when item is selected it immediately throws:

[Imprasna]

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

I am getting this error so, can anyone help me sort it out?