fix: Clear SearchBox without search as you type (#802)

* feat(stories): add SearchBox without search as you type * fix(SearchBox): clear the input when reset button is clicked
algolia · Jan 7, 2018 · c49b2b6 · c49b2b6
1 parent 01ad29a
commit c49b2b6
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 20 deletions.
diff --git a/packages/react-instantsearch/src/components/SearchBox.js b/packages/react-instantsearch/src/components/SearchBox.js
@@ -119,17 +119,6 @@ class SearchBox extends Component {
       ? this.props.currentRefinement
       : this.state.query;
 
-  setQuery = val => {
-    const { refine, searchAsYouType } = this.props;
-    if (searchAsYouType) {
-      refine(val);
-    } else {
-      this.setState({
-        query: val,
-      });
-    }
-  };
-
   onInputMount = input => {
     this.input = input;
     if (this.props.__inputRef) {
@@ -182,20 +171,33 @@ class SearchBox extends Component {
     return false;
   };
 
-  onChange = e => {
-    this.setQuery(e.target.value);
+  onChange = event => {
+    const { searchAsYouType, refine, onChange } = this.props;
+    const value = event.target.value;
 
-    if (this.props.onChange) {
-      this.props.onChange(e);
+    if (searchAsYouType) {
+      refine(value);
+    } else {
+      this.setState({ query: value });
+    }
+
+    if (onChange) {
+      onChange(event);
     }
   };
 
-  onReset = () => {
-    this.setQuery('');
+  onReset = event => {
+    const { searchAsYouType, refine, onReset } = this.props;
+
+    refine('');
     this.input.focus();
 
-    if (this.props.onReset) {
-      this.props.onReset();
+    if (!searchAsYouType) {
+      this.setState({ query: '' });
+    }
+
+    if (onReset) {
+      onReset(event);
     }
   };
 

diff --git a/packages/react-instantsearch/src/components/SearchBox.test.js b/packages/react-instantsearch/src/components/SearchBox.test.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Enzyme, { mount } from 'enzyme';
+import Enzyme, { shallow, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import SearchBox from './SearchBox';
 
@@ -251,4 +251,40 @@ describe('SearchBox', () => {
     instanceWithoutLoadingIndicator.unmount();
     instanceWithLoadingIndicator.unmount();
   });
+
+  it('expect to clear the query when the reset button is click with searchAsYouType=true', () => {
+    const refine = jest.fn();
+
+    const wrapper = shallow(
+      <SearchBox refine={refine} searchAsYouType />
+    ).dive();
+
+    // Simulate the ref
+    wrapper.instance().input = { focus: jest.fn() };
+
+    wrapper.find('button[type="reset"]').simulate('click');
+
+    expect(refine).toHaveBeenCalledWith('');
+    expect(wrapper.instance().input.focus).toHaveBeenCalled();
+  });
+
+  it('expect to clear the query when the reset button is click with searchAsYouType=false', () => {
+    const refine = jest.fn();
+
+    const wrapper = shallow(
+      <SearchBox refine={refine} searchAsYouType={false} />
+    ).dive();
+
+    // Simulate the ref
+    wrapper.instance().input = { focus: jest.fn() };
+
+    // Simulate change event
+    wrapper.setState({ query: 'Hello' });
+
+    wrapper.find('button[type="reset"]').simulate('click');
+
+    expect(refine).toHaveBeenCalledWith('');
+    expect(wrapper.instance().input.focus).toHaveBeenCalled();
+    expect(wrapper.state()).toEqual({ query: '' });
+  });
 });
diff --git a/stories/SearchBox.stories.js b/stories/SearchBox.stories.js
@@ -83,6 +83,18 @@ stories
       filterProps,
     }
   )
+  .addWithJSX(
+    'without search as you type',
+    () => (
+      <WrapWithHits searchBox={false} linkedStoryGroup="SearchBox">
+        <SearchBox searchAsYouType={false} />
+      </WrapWithHits>
+    ),
+    {
+      displayName,
+      filterProps,
+    }
+  )
   .addWithJSX(
     'playground',
     () => (