React-modal: onClick() not working for the nested links on ReactModal Window

[PalsRoy]

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 (

isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
contentLabel="Example Modal"
ariaHideApp={false}
className="Modal"
overlayClassName="Overlay"
bodyOpenClassName="bodyModal"
>
closeModal={this.closeModal}
{...this.props.modalProps}
/>

)
}
}
export default connect(mapStateToProps, null)(ModalRoot)
`

1. COMPONENT RENDERED INSIDE THE MODAL WINDOW WITH MULTIPLE LINKS
   `import 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 = (

I am a Regions Checkbox component!

);
break;
case 'Countries':
componentSet = (

I am a Countries Checkbox component!

);
break;
case 'Sectors':
componentSet = (

I am a Sectors Checkbox component!

);
break;
case 'PortfolioManager':
componentSet = (

I am a PortfolioManager Checkbox component!

);
break;
case 'Range':
componentSet = (

I am a Range Checkbox component!

);
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]

Hi @PalsRoy, can you make a small reproducible example (codepen, codesandbox or other)?

[PalsRoy]

Sure @diasbruno ! Thank you for the quick response

[PalsRoy]

Expected behaviour:
I thought onClick would render the selected component.Content should update with the link clicks.

Link to example of issue:

https://codepen.io/pallavr/pen/ZqYjBE

Additional notes:
This is the requested client requirement for the popup Modal Window.

[diasbruno]

The only thing missing in your example is to add your variable componentSet to the rendered result. Hope this is what is missing on the project too.

<ReactModal 
           isOpen={this.state.showModal}
           contentLabel="Minimal Modal Example"
        >
    {componentSet}{/* <-- missing */}
   <div>
    ...

NOTE: if you add this line on the example, codepen might complain about componentSet is not defined.... You can add this line before the switch:

let componentSet;

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