Bugfix/issue 1005 prevent page reset on search close (gregnb#1010)

* Use new method of updating when closing search bar

This allows us to branch the functionality so we can more easily assign different behavior for closing the search bar

* Update toolbar test to accommodate search close function

* Add test for search close functionality not reseting page

* Add test for reseting search text on search bar close

* Prettify files

src/MUIDataTable.js

@@ -922,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 => ({
@@ -1298,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}

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/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',

test/MUIDataTableToolbar.test.js

@@ -164,6 +164,7 @@ describe('<TableToolbar />', function() {
     const searchTextUpdate = () => {};
     const shallowWrapper = shallow(
       <TableToolbar
+        searchClose={() => {}}
         searchTextUpdate={searchTextUpdate}
         columns={columns}
         data={data}