Repository: gregnb/mui-datatables
Pull request #769 (2019-07-14 08:20:58)

Bugfix/issue 765 row click selection callbacks
Addresses the bug in https://github.com/gregnb/mui-datatables/issues/765.

coveralls: 
[![Coverage Status](https://coveralls.io/builds/24555648/badge)](https://coveralls.io/builds/24555648)

Coverage increased (+0.02%) to 75.779% when pulling **9b53ec59776e9114f43d932e377a0eaa7a3094e6 on bugfix/issue-765-row-click-selection-callbacks** into **d09ed0c73257b9b4846b5ac6fb6c0da469b766fe on master**.


Patch:
diff --git a/examples/selectable-rows/index.js b/examples/selectable-rows/index.js
index 9860ba9..4323549 100644
--- a/examples/selectable-rows/index.js
+++ b/examples/selectable-rows/index.js
@@ -3,6 +3,9 @@ import ReactDOM from "react-dom";
 import MUIDataTable from "../../src/";
 
 class Example extends React.Component {
+  state = {
+    rowsSelected: []
+  };
 
   render() {
 
@@ -49,12 +52,15 @@ class Example extends React.Component {
 
     const options = {
       filter: true,
-      selectableRows: true,
+      selectableRows: 'multiple',
+      selectableRowsOnClick: true,
       filterType: 'dropdown',
       responsive: 'stacked',
       rowsPerPage: 10,
+      rowsSelected: this.state.rowsSelected,
       onRowsSelect: (rowsSelected, allRows) => {
         console.log(rowsSelected, allRows);
+        this.setState({ rowsSelected: allRows.map(row => row.dataIndex) });
       },
       onRowsDelete: (rowsDeleted) => {
         if (rowsDeleted.data[0].dataIndex === 0) {
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index c6a04e7..72e80c6 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -990,7 +990,7 @@ class MUIDataTable extends React.Component {
           let rowPos = -1;
 
           for (let cIndex = 0; cIndex < selectedRows.length; cIndex++) {
-            if (selectedRows[cIndex].index === index) {
+            if (selectedRows[cIndex].dataIndex === dataIndex) {
               rowPos = cIndex;
               break;
             }
diff --git a/src/components/TableBody.js b/src/components/TableBody.js
index eee66db..e2a2395 100644
--- a/src/components/TableBody.js
+++ b/src/components/TableBody.js
@@ -116,13 +116,8 @@ class TableBody extends React.Component {
       return;
     }
 
-    // Don't trigger onRowClick if the event was actually a row selection
-    if (event.target.id && event.target.id.startsWith('MUIDataTableSelectCell')) {
-      return;
-    }
-
     // Check if we should toggle row select when row is clicked anywhere
-    if (this.props.options.selectableRowsOnClick && this.props.options.selectableRows !== 'none') {
+    if (this.props.options.selectableRowsOnClick && this.props.options.selectableRows !== 'none' && this.isRowSelectable(data.dataIndex)) {
       const selectRow = { index: data.rowIndex, dataIndex: data.dataIndex };
       this.handleRowSelect(selectRow);
     }
@@ -132,6 +127,11 @@ class TableBody extends React.Component {
       this.props.toggleExpandRow(expandRow);
     }
 
+    // Don't trigger onRowClick if the event was actually a row selection
+    if (event.target.id && event.target.id.startsWith('MUIDataTableSelectCell') || this.props.options.selectableRowsOnClick) {
+      return;
+    }
+
     this.props.options.onRowClick && this.props.options.onRowClick(row, data, event);
   };
 


Test patch:
diff --git a/test/MUIDataTableBody.test.js b/test/MUIDataTableBody.test.js
index 2fb80ac..2c2d8f6 100644
--- a/test/MUIDataTableBody.test.js
+++ b/test/MUIDataTableBody.test.js
@@ -235,6 +235,38 @@ describe('<TableBody />', function() {
     assert.strictEqual(toggleExpandRow.callCount, 0);
   });
 
+  it('should not gather selected row data when clicking row with selectableRowsOnClick=true when it is disabled with isRowSelectable.', () => {
+    let selectedRowData;
+    const options = { selectableRows: true, selectableRowsOnClick: true, isRowSelectable: dataIndex => dataIndex === 2 ? false : true };
+    const selectRowUpdate = (type, data) => (selectedRowData = data);
+    const toggleExpandRow = spy();
+
+    const mountWrapper = mount(
+      <TableBody
+        data={displayData}
+        count={displayData.length}
+        columns={columns}
+        page={0}
+        rowsPerPage={10}
+        selectedRows={[]}
+        selectRowUpdate={selectRowUpdate}
+        expandedRows={[]}
+        toggleExpandRow={toggleExpandRow}
+        options={options}
+        searchText={''}
+        filterList={[]}
+      />,
+    );
+
+    mountWrapper
+      .find('#MUIDataTableBodyRow-2')
+      .first()
+      .simulate('click');
+
+    assert.isUndefined(selectedRowData);
+    assert.strictEqual(toggleExpandRow.callCount, 0);
+  });
+
   it('should gather expanded row data when clicking row with expandableRows=true and expandableRowsOnClick=true.', () => {
     let expandedRowData;
     const options = { selectableRows: true, expandableRows: true, expandableRowsOnClick: true };
@@ -338,6 +370,36 @@ describe('<TableBody />', function() {
     assert.strictEqual(options.onRowClick.callCount, 0);
   });
 
+  it('should not call onRowClick when clicking to select a row', () => {
+    const options = { selectableRows: true, selectableRowsOnClick: true, onRowClick: spy() };
+    const selectRowUpdate = spy();
+    const toggleExpandRow = spy();
+
+    const mountWrapper = mount(
+      <TableBody
+        data={displayData}
+        count={displayData.length}
+        columns={columns}
+        page={0}
+        rowsPerPage={10}
+        selectedRows={[]}
+        selectRowUpdate={selectRowUpdate}
+        expandedRows={[]}
+        toggleExpandRow={toggleExpandRow}
+        options={options}
+        searchText={''}
+        filterList={[]}
+      />,
+    );
+
+    mountWrapper
+      .find('TableSelectCell')
+      .first()
+      .simulate('click');
+
+    assert.strictEqual(options.onRowClick.callCount, 0);
+  });
+
   it('should call onRowClick when Row is clicked', () => {
     const options = { selectableRows: true, onRowClick: spy() };
     const selectRowUpdate = stub();