Using stopPropagation to avoid table onclick

Introduction

The table has is own onclick function, e.g, click one cell to select the row. Then if there is a button or icon in the cell, the button’s onclick conflicts tables onclick function.

Solution

In button or icon’s onlick fucntion, add e.stopPropagation();

e.g.,

Following is my icon in react-s3-table:

Pseudocode

<div style={{color: 'rgb(255,153,0)'}}>
      <FaCloudUpload size={32} onClick={this.openModal}/>
</div>

Then change the openModal(e) function to following:

openModal(e) {
    e.stopPropagation();
    this.setState({modalIsOpen: true});
}

Using Enzyme to test the onclick:

describe('AttachmentModal', () => {
  const minProps = {
    id: "",
    row: {}
  };

  it('should render without exploding', () => {
    const wrapper = shallow(<AttachmentModal {...minProps}/>);
    expect(wrapper.length).to.equal(1);
  });

  it('should open modal when button is clicked', () => {
    const wrapper = shallow(<AttachmentModal {...minProps}/>);
    wrapper.find(FaCloudUpload).simulate('click', { stopPropagation: () => undefined });
    expect(wrapper.find(Modal).prop('isOpen')).to.equal(true);
  });
});