React-modal: getting bind warning from react after 1.7.0

[mreishus]

Summary:

I'm getting this warning from react in the console:

Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See Modal

Here is the call where's it happening (look for the arrow in comments on right side)

  componentWillUnmount: function() {
    if (this.props.ariaHideApp) {
      ariaAppHider.show(this.props.appElement);
    }

    var state = this.portal.state;
    var now = Date.now();
    var closesAt = state.isOpen && this.props.closeTimeoutMS
      && (state.closesAt
        || now + this.props.closeTimeoutMS);

    if (closesAt) {
      if (!state.beforeClose) {
        this.portal.closeWithTimeout();
      }

      setTimeout(this.removePortal.bind(this), closesAt - now);   /// <-- This line
    } else {
      this.removePortal();
    }
  },

Steps to reproduce:

I think it happens when I unmount a modal when it's still disappearing.

[feux07]

I also got this warning when use with more than one modal on same page.

[diasbruno]

This can be due to some double bind(). Can you guys make a PR for this?
If changing this.removePortal.bind(this) to this.removePortal works, than it's a fix.

[mreishus]

Tested, works fine, made pull request https://github.com/reactjs/react-modal/pull/348

[diasbruno]

[edit] actually, it need to be confirmed.

348 is not a fix, unfortunately. @adjohnson916 spotted the 'bug' when referencing this inside of the callback of the setTimeout's function. see he's comment on the PR.

[mreishus]

yeah, I don't know how to fix then.

bind -> react gives warning
don't bind -> runs at wrong time, test fails
use es6 -> works w/o warning but uglify fails

[diasbruno]

yeah, this is kinda sad. this mixture of es5/6.

  componentWillUnmount: function() {
    var modal = this;
    {...}
    // yes, old style closure...
    setTimeout(function() { console.log(this, modal); modal.removePortal(); }, 1);
  }

[claydiffrient]

I think that just having bind there is probably the best for now. The warning shouldn't cause problems. I mean the goal is that 1.7 is a release to appease people as an intermediate to 2.0. Backporting from a ES2015+ codebase to a ES5 codebase is messy.

[AndersDJohnson]

@claydiffrient @diasbruno @mreishus I just submitted PR #353 which should solve this.

[diasbruno]

Since this issue has a fix, I'm closing this issue.

Thanks @mreishus and @adjohnson916 for taking care of this one.

[mreishus]

thanks, sorry about the mess, I was just trying to make things easier~