diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 5911d2008..e629ac963 100644
--- a/src/MUIDataTable.js
+++ b/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}
diff --git a/src/components/TableToolbar.js b/src/components/TableToolbar.js
index 81ef3d6c6..0c9b6e6fa 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,
diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
index 3f51c9a2a..86a55ad03 100644
--- a/test/MUIDataTable.test.js
+++ b/test/MUIDataTable.test.js
@@ -776,6 +776,71 @@ describe('', 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();
+ const table = shallowWrapper.dive();
+ const instance = table.instance();
+ const shallowWrapperTableToolbar = shallow(
+ ,
+ );
+ 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();
+ const table = shallowWrapper.dive();
+ const instance = table.instance();
+ const shallowWrapperTableToolbar = shallow(
+ ,
+ );
+ 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 9e5a76f7e..301dff104 100644
--- a/test/MUIDataTableToolbar.test.js
+++ b/test/MUIDataTableToolbar.test.js
@@ -164,6 +164,7 @@ describe('', function() {
const searchTextUpdate = () => {};
const shallowWrapper = shallow(
{}}
searchTextUpdate={searchTextUpdate}
columns={columns}
data={data}