Unmounting and animation about react-modal

[mzabriskie]

Wouldn't this work?

var App = React.createClass({
  handleModalClose() {
    doSomeAnimation(() => {
      this.setState({isModalOpen: false});
    });
  },

  render() {
    return (
      <div>
        <Modal
          isOpen={this.state.isModalOpen}
          onRequestClose={this.handleModalClose}>
          <h2>Hello World</h2>
          <button onClick={this.handleModalClose}>close</button>
        </Modal>
      </div>
    );
  }
});

Just wait for the animation to complete, then once it's completed call setState so that the modal is closed.

[atridgedcosta]

I got the close animation working by using the prop closeTimeoutMS and applying CSS to the class, .ReactModal__Content--before-close

It works for me, however, I get this warning in the console Warning: You tried to return focus to null but it is not in the DOM anymore

Everything behaves as I expect so i'm not sure what to do so that I can avoid this warning.

[leoasis]

That works when you don't unmount the component. In some use cases, such as modals inside a component that belongs to a page component, when you have that modal opened and you switch pages, that will unmount the current page and mount the next one, thus unmounting all the page's components, including the modal, which won't wait until the timeout finishes, it will just be removed. Since the modal in reality is in another DOM element, there could be an option to make it properly close the modal even if unmounting the component.

[leoasis]

That would work if I have all modals as direct children of the root component, so I have control on when to unmount them, but the problem is related to unmounting a component that is some levels above the modal, like a page component, and still having the modal unmount gracefully with an animation.