React-modal: Unable to close modal

[anthonybrown]

Summary:

Steps to reproduce:

1. Click on OK button
2. Close the modal by clicking on the overlay, pressing esc or the close button
3. Click on the grey div
4. Close the modal by clicking on the overlay, pressing esc or the close button

Expected behavior:

The expected behavior is that both modals close.
I'm basically using the code from one of the examples on the site
but for some reason, the div modal won't close unless you press the ESC key.
If you try clicking, then the modal won't close.

import React, { Component } from 'react';
import ReactModal from 'react-modal';

const customStyles = {
  content: {
    top         : '50%',
    left        : '50%',
    right       : 'auto',
    bottom      : 'auto',
    marginRight : '-50%',
    transform   : 'translate(-50%, -50%',
  }
};

ReactModal.setAppElement('#root');

class Cookie extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: false,
      showModal2: false
    };

    this.handleOpenModal   = this.handleOpenModal.bind(this);
    this.handleOpenModal2  = this.handleOpenModal2.bind(this);
    this.handleCloseModal  = this.handleCloseModal.bind(this);
    this.handleCloseModal2 = this.handleCloseModal2.bind(this);
    this.afterOpenModal    = this.afterOpenModal.bind(this);
    this.afterOpenModal2   = this.afterOpenModal2.bind(this);
  }

  handleOpenModal () {
    this.setState({ showModal: true });
  }

  handleOpenModal2 () {
    this.setState({ showModal2: true });
  }

  handleCloseModal () {
    this.setState({ showModal: false });
  }

  handleCloseModal2 () {
    this.setState({ showModal2: false });
  }

  afterOpenModal() {
    this.subtitle.style.color = '#f00';
  }

  afterOpenModal2() {
    this.subtitle.style.color = 'slateblue';
  }


  render() {
    return (
      <div id='ui-cookie-support-notification' role='alertdialog'>
        <section className='ui-cookie-support-message-wrap'>
          <div onClick={this.handleOpenModal} className='ui-cookie-support-half ui-cookie-support-message'>
          <ReactModal
            isOpen={this.state.showModal}
            onAfterOpen={this.afterOpenModal}
            onRequestClose={this.handleCloseModal}
            style={customStyles}
          >
          <h4 ref={subtitle => this.subtitle = subtitle}>This is the cookie acceptence policy</h4>
          <div>Thank you for the acceptence of our cookie policy.</div>
          <hr />
          <button onClick={this.handleCloseModal}>close</button>
        </ReactModal>
            <p className='valign--middle'>
              We use cookies to enhance your website experience, by continuing your visit, you accept this <a href='/privacy'>policy</a>.
            </p>
          </div>
            <button 
              className ='ui-cookie-support-dismiss-button ui-cookie-support-dismiss-link ui-warn-flag-close-btn ui-top-notification-close-btn'
              onClick={this.handleOpenModal2}
             >
            OK
          </button>
            <ReactModal
              isOpen={this.state.showModal2}
              onAfterOpen={this.afterOpenModal2}
              onRequestClose={this.handleCloseModal2}
              style={customStyles}
            >
            <h4 ref={subtitle => this.subtitle = subtitle}>This is the cookie acceptence policy</h4>
            <div>Thank you for the acceptence of our cookie policy.</div>
            <hr />
            <button onClick={this.handleCloseModal2}>close</button>
          </ReactModal>
        </section>
      </div>
    );
  }
}

[anthonybrown]

I fixed this by putting e.stopPropagation(); on the handleCloseModal(e) methods, which stops the bubbling up.

handleCloseModal(e) {
  e.stopPropagation();
  this.setState({ showModal: false });
}