Unmounting and animation

[leoasis]

When the modal is unmounted, it will abruptly close, not waiting for any animations to finish. Sometimes it is desired for the modal to graciously close with animations instead.

What I'm not too sure yet is how this should be handled, should it be a prop that is sent to tell that the modal should be closed on unmount? Should that be the normal behavior?

What do you guys think? Have you ever needed this in your apps?

[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.

[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.

[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.