React how to close a popover with a modal

Question

With react-bootstrap, I have a popover that contains a list. On click of one of the list items, it opens a modal.

How to close the popover when the modal is opening?

I tried:

• rootClose but it's not working

• React Bootstrap - How to manually close OverlayTrigger, that close both, the popover and the modal

  class TypeColumn extends React.Component {
  constructor(props, context) {
      super(props, context);
      this.close = this.close.bind(this);
  }
  
  close() {
      this.refs.overlay.hide();
  }
  
  render() {
      const popoverClick = (
          <Popover id="popover-trigger-click-root-close">
              <ul>
                  <NumberOptions onClick={this.close} />
              </ul>
          </Popover>
      );
  
      return (
          <OverlayTrigger
              show={show}
              trigger="click"
              placement="bottom"
              overlay={popoverClick}
              ref="overlay"
          >
              <i
                  className={columnTypeIcon} aria-hidden="true"
              />
          </OverlayTrigger>
      );
  }
  }
  
  class NumberOptions extends React.Component {
  constructor(props) {
      super(props);
      this.open = this.open.bind(this);
  
      this.state = {
          showModal: false,
      };
  }
  
  open() {
      this.setState({ showModal: true });
      this.props.onClick();
  }
  
  render() {
      return (
          <div>
              <li
                  data-value={DATA_TYPES.NUMBER}
                  onClick={this.open}
              >
                  Options nombre
              </li>
  
              <Modal
                show={showModal}
                dialogClassName={styles.customModal}
              >
              ...
              </Modal>
          </div>
      );
  }
  }
  

Answer 1

Since your component Modal is a child of NumberOptions, Modal is closing too when NumberOptions is closing.

So you need to lift Modal component at least to the same level as OverlayTrigger.