onClick() not working for the nested links on ReactModal Window

Summary:

I need to create a pop-up Modal Window which has multiple side-tabbed panes and on clicking of these tabs each of them renders a new component inside the Modal Window. I am using a Redux approach to create reusable Modal Windows across my application. I try clicking on the various links but no action or console.log are shown.

Steps to reproduce:

1. REUSBALE WRAPPER FOR REDUX MODALS `import React from ‘react’; import PropTypes from ‘prop-types’; import { connect } from ‘react-redux’; import ReactModal from ‘react-modal’; import FiltersModals from ‘./filtersModal’; import { MODAL_TYPE_FILTERS } from ‘…/…/constants/modalConstants’; import styles from ‘./styles.css’;

const MODAL_TYPES = { ‘alert’: FiltersModals } const mapStateToProps = state => ({ …state.modal }) class ModalRoot extends React.Component { constructor(props) { super(props); this.state = { modalIsOpen: false }; this.closeModal = this.closeModal.bind(this) }

componentWillReceiveProps(nextProps) { if (nextProps !== this.props) { this.setState({ modalIsOpen: nextProps.modalProps.open }) } } closeModal() { this.setState({ modalIsOpen: false }) } render() { if (!this.props.modalType) { return null } const SpecifiedModal = MODAL_TYPES[this.props.modalType]; return ( <div> <ReactModal isOpen={this.state.modalIsOpen} onRequestClose={this.closeModal} contentLabel="Example Modal" ariaHideApp={false} className="Modal" overlayClassName="Overlay" bodyOpenClassName="bodyModal" > <SpecifiedModal closeModal={this.closeModal} {…this.props.modalProps} /> </ReactModal> </div> ) } } export default connect(mapStateToProps, null)(ModalRoot) 2. COMPONENT RENDERED INSIDE THE MODAL WINDOW WITH MULTIPLE LINKSimport React, {Component} from ‘react’; import ‘bootstrap/dist/css/bootstrap.min.css’; import styles from ‘./styles.css’; import LineAwesome from “…/line-awesome”;

class filtersModal extends Component {

constructor() { super(); this.state = { selectedComponentSet: ‘Country’ } }

handleLinkClick(link) { this.setState({selectedComponentSet: link}); }

render() { const {closeModal, title, message} = this.props; switch (this.state.selectedComponentSet) { case ‘Regions’: componentSet = (<div className="component"> I am a Regions Checkbox component! </div>); break; case ‘Countries’: componentSet = (<div className="component"> I am a Countries Checkbox component! </div>); break; case ‘Sectors’: componentSet = (<div className="component"> I am a Sectors Checkbox component! </div>); break; case ‘PortfolioManager’: componentSet = (<div className="component"> I am a PortfolioManager Checkbox component! </div>); break; case ‘Range’: componentSet = (<div className="component"> I am a Range Checkbox component! </div>); break; }

return (<div className="modal-dialog modal-lg ts-modal modal-dialog-centered">
  <div className={styles.modalContentTX}>
    <div className={styles.modalHeaderTX}>
      <h5 className={styles.modalTitleTX}>{title}</h5>
      <button type="button" data-dismiss="modal" aria-label="Close" onClick={closeModal}>
        <span className="la la-close"></span>
      </button>
    </div>
    <div className={styles.modalBodyTX}>
      <div className={styles.modalTabsLeftTX}>
        <div className={styles.tabNavContainer}>
          <ul className={styles.ulNavTX}>
            <li className={this.state.selectedComponentSet === 'Regions'
                ? 'active'
                : 'null'} onClick={this.handleLinkClick.bind(this, 'Regions')}>Regions</li>
            <li className={this.state.selectedComponentSet === 'Countries'
                ? 'active'
                : 'null'} onClick={this.handleLinkClick.bind(this, 'Countries')}>Countries</li>
            <li className={this.state.selectedComponentSet === 'Sectors'
                ? 'active'
                : 'null'} onClick={this.handleLinkClick.bind(this, 'Sectors')}>Sectors</li>
            <li className={this.state.selectedComponentSet === 'PortfolioManager'
                ? 'active'
                : 'null'} onClick={this.handleLinkClick.bind(this, 'PortfolioManager')}>Portfolio Manager</li>
            <li className={this.state.selectedComponentSet === 'Range'
                ? 'active'
                : 'null'} onClick={this.handleLinkClick.bind(this, 'Range')}>Range</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>);

} }

export default filtersModal; `

Expected behavior:

Link to example of issue:

Additional notes:

[diasbruno]

The modal-dialog class has the property pointer-events: none; which will prevent the mouse events to get to those elements on the list.

[PalsRoy]

I though so, as a workaround I will create my own css classes to control the properties of the modal window because event propagation is more important from the application point of view. Thank you again!