React-modal: Unmounting and animation

Created on 2 Feb 2015 · 4Comments · Source: reactjs/react-modal

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?

Source

leoasis

Most helpful comment

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.

mzabriskie on 24 Mar 2015

👍2

All 4 comments

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.

atridgedcosta on 27 Feb 2015

👍1

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 on 4 Mar 2015

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.

mzabriskie on 24 Mar 2015

👍2

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.

leoasis on 25 Mar 2015

Was this page helpful?

0 / 5 - 0 ratings