Repository: gregnb/mui-datatables
Pull request #1010 (2019-10-16 22:05:39)

Bugfix/issue 1005 prevent page reset on search close
Closes https://github.com/gregnb/mui-datatables/issues/1005

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

Coverage decreased (-0.06%) to 77.341% when pulling **f7d0de7b154d608efb5447719fdc7a06278f0547 on bugfix/issue-1005-prevent-page-reset-on-search-close** into **cace9dfc042be39f2795e9eff678dec0f283a1a6 on master**.


Patch:
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 5aa94a5..e629ac9 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -38,8 +38,6 @@ const defaultTableStyles = theme => ({
     maxHeight: '499px',
   },
   responsiveScrollFullHeight: {
-    overflowX: 'auto',
-    overflow: 'auto',
     height: '100%',
     maxHeight: 'none',
   },
@@ -454,7 +452,7 @@ class MUIDataTable extends React.Component {
   transformData = (columns, data) => {
     const leaf = (obj, path) => path.split('.').reduce((value, el) => (value ? value[el] : undefined), obj);
 
-    return Array.isArray(data[0])
+    const transformedData = Array.isArray(data[0])
       ? data.map(row => {
           let i = -1;
 
@@ -464,6 +462,12 @@ class MUIDataTable extends React.Component {
           });
         })
       : data.map(row => columns.map(col => leaf(row, col.name)));
+
+      // We need to determine if object data exists in the transformed structure, as this is currently not allowed
+      const hasInvalidData = transformedData.filter(data => data.filter(d => typeof d === 'object' && d !== null && !Array.isArray(d)).length > 0).length > 0;
+      if (hasInvalidData) throw Error(`Cannot accept objects for cell data. Cells need to contain strings | numbers. It\'s possible this error is the result of a missing dot in the column name field (e.g. name: "company" instead of name: "company.id")`);
+
+      return transformedData;
   };
 
   setTableData(props, status, callback = () => {}) {
@@ -918,6 +922,23 @@ class MUIDataTable extends React.Component {
     );
   };
 
+  searchClose = () => {
+    this.setState(
+      prevState => ({
+        searchText: null,
+        displayData: this.options.serverSide
+          ? prevState.displayData
+          : this.getDisplayData(prevState.columns, prevState.data, prevState.filterList, null),
+      }),
+      () => {
+        this.setTableAction('search');
+        if (this.options.onSearchChange) {
+          this.options.onSearchChange(this.state.searchText);
+        }
+      },
+    );
+  };
+
   searchTextUpdate = text => {
     this.setState(
       prevState => ({
@@ -1294,6 +1315,7 @@ class MUIDataTable extends React.Component {
               resetFilters={this.resetFilters}
               searchText={searchText}
               searchTextUpdate={this.searchTextUpdate}
+              searchClose={this.searchClose}
               tableRef={this.getTableContentRef}
               title={title}
               toggleViewColumn={this.toggleViewColumn}
diff --git a/src/components/TableToolbar.js b/src/components/TableToolbar.js
index 81ef3d6..0c9b6e6 100644
--- a/src/components/TableToolbar.js
+++ b/src/components/TableToolbar.js
@@ -189,7 +189,7 @@ class TableToolbar extends React.Component {
 
     this.props.setTableAction('onSearchClose');
     if (onSearchClose) onSearchClose();
-    this.props.searchTextUpdate(null);
+    this.props.searchClose();
 
     this.setState(() => ({
       iconActive: null,


Test patch:
diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
index 3f51c9a..86a55ad 100644
--- a/test/MUIDataTable.test.js
+++ b/test/MUIDataTable.test.js
@@ -776,6 +776,71 @@ describe('<MUIDataTable />', function() {
     assert.deepEqual(JSON.stringify(state.displayData), expectedResult);
   });
 
+  it('should properly set searchText when hiding the search bar', () => {
+    const options = {
+      rowsPerPage: 1,
+      textLabels,
+    };
+    const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} />);
+    const table = shallowWrapper.dive();
+    const instance = table.instance();
+    const shallowWrapperTableToolbar = shallow(
+      <TableToolbar
+        options={options}
+        searchTextUpdate={spy()}
+        searchClose={instance.searchClose}
+        columns={columns}
+        data={data}
+        setTableAction={spy()}
+      />,
+    );
+    const instanceTableToolbar = shallowWrapperTableToolbar.dive().instance();
+
+    instance.searchTextUpdate('Joe');
+    table.update();
+    instanceTableToolbar.searchButton = { focus: () => {} };
+    instanceTableToolbar.hideSearch();
+    table.update();
+    const searchText = table.state().searchText;
+
+    assert.strictEqual(searchText, null);
+  });
+
+  it('should not change page when hiding the search bar', () => {
+    const options = {
+      rowsPerPage: 1,
+      textLabels,
+    };
+    const shallowWrapper = shallow(<MUIDataTable columns={columns} data={data} options={options} />);
+    const table = shallowWrapper.dive();
+    const instance = table.instance();
+    const shallowWrapperTableToolbar = shallow(
+      <TableToolbar
+        options={options}
+        searchTextUpdate={spy()}
+        searchClose={instance.searchClose}
+        columns={columns}
+        data={data}
+        setTableAction={spy()}
+      />,
+    );
+    const instanceTableToolbar = shallowWrapperTableToolbar.dive().instance();
+
+    // Simulate a search that has multiple pages of results
+    instanceTableToolbar.setActiveIcon('search');
+    instanceTableToolbar.searchButton = { focus: () => {} };
+    instance.searchTextUpdate('j');
+    table.update();
+
+    // Simulate changing the page and then hiding the search bar
+    instance.changePage(1);
+    instanceTableToolbar.hideSearch();
+    table.update();
+
+    const page = table.state().page;
+    assert.strictEqual(page, 1);
+  });
+
   it('should filter displayData when searchText is set', () => {
     const options = {
       searchText: 'Joe',
diff --git a/test/MUIDataTableToolbar.test.js b/test/MUIDataTableToolbar.test.js
index 9e5a76f..301dff1 100644
--- a/test/MUIDataTableToolbar.test.js
+++ b/test/MUIDataTableToolbar.test.js
@@ -164,6 +164,7 @@ describe('<TableToolbar />', function() {
     const searchTextUpdate = () => {};
     const shallowWrapper = shallow(
       <TableToolbar
+        searchClose={() => {}}
         searchTextUpdate={searchTextUpdate}
         columns={columns}
         data={data}