MDCRipple: long press and hiding element causes a crash

[robcaldecottvelo]

I am using the popular rmwc library which ships with MDC 0.39.1. If you have a ripple-enabled button/FAB and long-press it with the mouse (so you get a full ripple) and then immediately hide the element then mdc.ripple.js will crash when trying to remove a class from a root_ that has already been destroyed.

Here is a codesandbox:

https://codesandbox.io/s/3rpo0829q6

The code that shows the problem:

class App extends React.Component {
  state = { show: true };

  render() {
    return (
      <React.Fragment>
        <p>Long click on the button below (so you get a full ripple)</p>
        {this.state.show && (
          <Button
            raised
            onClick={() => {
              this.setState({ show: false });
            }}
          >
            Long click me
          </Button>
        )}
      </React.Fragment>
    );
  }
}

The crash occurs in this MDC code (mdc.ripple.js)

removeClass: function removeClass(className) {
  return instance.root_.classList.remove(className);
}

[kfranqueiro]

This looks like #2460 except for deactivation rather than activation. I think this should be straightforward to fix.

[jamesmfriedman]

@kfranqueiro updated sandbox for the issue.

I broke the other one because of my movement to separate packages.
https://codesandbox.io/s/qzwm42p1vw