fix(SearchBox): avoid to bind click on reset button (#979)

algolia · Feb 16, 2018 · ea3063a · ea3063a
1 parent d5ddaac
commit ea3063a
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 25 deletions.
diff --git a/packages/react-instantsearch/src/components/SearchBox.js b/packages/react-instantsearch/src/components/SearchBox.js
@@ -291,12 +291,7 @@ class SearchBox extends Component {
           >
             {submitComponent}
           </button>
-          <button
-            type="reset"
-            title={translate('resetTitle')}
-            {...cx('reset')}
-            onClick={this.onReset}
-          >
+          <button type="reset" title={translate('resetTitle')} {...cx('reset')}>
             {resetComponent}
           </button>
         </div>

diff --git a/packages/react-instantsearch/src/components/SearchBox.test.js b/packages/react-instantsearch/src/components/SearchBox.test.js
@@ -252,7 +252,7 @@ describe('SearchBox', () => {
     instanceWithLoadingIndicator.unmount();
   });
 
-  it('expect to clear the query when the reset button is click with searchAsYouType=true', () => {
+  it('expect to clear the query when the form is reset with searchAsYouType=true', () => {
     const refine = jest.fn();
 
     const wrapper = shallow(
@@ -262,13 +262,13 @@ describe('SearchBox', () => {
     // Simulate the ref
     wrapper.instance().input = { focus: jest.fn() };
 
-    wrapper.find('button[type="reset"]').simulate('click');
+    wrapper.find('form').simulate('reset');
 
     expect(refine).toHaveBeenCalledWith('');
     expect(wrapper.instance().input.focus).toHaveBeenCalled();
   });
 
-  it('expect to clear the query when the reset button is click with searchAsYouType=false', () => {
+  it('expect to clear the query when the form is reset with searchAsYouType=false', () => {
     const refine = jest.fn();
 
     const wrapper = shallow(
@@ -281,7 +281,7 @@ describe('SearchBox', () => {
     // Simulate change event
     wrapper.setState({ query: 'Hello' });
 
-    wrapper.find('button[type="reset"]').simulate('click');
+    wrapper.find('form').simulate('reset');
 
     expect(refine).toHaveBeenCalledWith('');
     expect(wrapper.instance().input.focus).toHaveBeenCalled();

diff --git a/packages/react-instantsearch/src/components/__snapshots__/Menu.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/Menu.test.js.snap
@@ -80,7 +80,6 @@ exports[`Menu Menu with search inside items but no search results 1`] = `
         </button>
         <button
           className="ais-SearchBox__reset"
-          onClick={[Function]}
           title="Clear the search query."
           type="reset"
         >
@@ -247,7 +246,6 @@ exports[`Menu Menu with search inside items with search results 1`] = `
         </button>
         <button
           className="ais-SearchBox__reset"
-          onClick={[Function]}
           title="Clear the search query."
           type="reset"
         >
@@ -370,7 +368,6 @@ exports[`Menu applies translations 1`] = `
         </button>
         <button
           className="ais-SearchBox__reset"
-          onClick={[Function]}
           title="Clear the search query."
           type="reset"
         >

diff --git a/packages/react-instantsearch/src/components/__snapshots__/RefinementList.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/RefinementList.test.js.snap
@@ -81,7 +81,6 @@ exports[`RefinementList applies translations 1`] = `
           </button>
           <button
             className="ais-SearchBox__reset"
-            onClick={[Function]}
             title="Clear the search query."
             type="reset"
           >
@@ -337,7 +336,6 @@ exports[`RefinementList refinement list with search inside items but no search r
           </button>
           <button
             className="ais-SearchBox__reset"
-            onClick={[Function]}
             title="Clear the search query."
             type="reset"
           >
@@ -521,7 +519,6 @@ exports[`RefinementList refinement list with search inside items with search res
           </button>
           <button
             className="ais-SearchBox__reset"
-            onClick={[Function]}
             title="Clear the search query."
             type="reset"
           >

diff --git a/packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/SearchBox.test.js.snap
@@ -74,7 +74,6 @@ exports[`SearchBox applies its default props 1`] = `
     </button>
     <button
       className="ais-SearchBox__reset"
-      onClick={[Function]}
       title="Clear the search query."
       type="reset"
     >
@@ -166,7 +165,6 @@ exports[`SearchBox lets you customize its theme 1`] = `
     </button>
     <button
       className="ais-SearchBox__reset"
-      onClick={[Function]}
       title="Clear the search query."
       type="reset"
     >
@@ -258,7 +256,6 @@ exports[`SearchBox lets you customize its translations 1`] = `
     </button>
     <button
       className="ais-SearchBox__reset"
-      onClick={[Function]}
       title="RESET_TITLE"
       type="reset"
     >
@@ -344,7 +341,6 @@ exports[`SearchBox lets you give custom components for reset and submit 1`] = `
     </button>
     <button
       className="ais-SearchBox__reset"
-      onClick={[Function]}
       title="Clear the search query."
       type="reset"
     >
@@ -475,7 +471,6 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 1`]
     </button>
     <button
       className="ais-SearchBox__reset"
-      onClick={[Function]}
       title="Clear the search query."
       type="reset"
     >
@@ -608,7 +603,6 @@ exports[`SearchBox should render the loader if showLoadingIndicator is true 2`]
     </button>
     <button
       className="ais-SearchBox__reset"
-      onClick={[Function]}
       title="Clear the search query."
       type="reset"
     >
@@ -700,7 +694,6 @@ exports[`SearchBox transfers the autoFocus prop to the underlying input element
     </button>
     <button
       className="ais-SearchBox__reset"
-      onClick={[Function]}
       title="Clear the search query."
       type="reset"
     >
@@ -792,7 +785,6 @@ exports[`SearchBox treats its query prop as its input value 1`] = `
     </button>
     <button
       className="ais-SearchBox__reset"
-      onClick={[Function]}
       title="Clear the search query."
       type="reset"
     >
@@ -884,7 +876,6 @@ exports[`SearchBox treats its query prop as its input value 2`] = `
     </button>
     <button
       className="ais-SearchBox__reset"
-      onClick={[Function]}
       title="Clear the search query."
       type="reset"
     >