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}