fix(SFFV): fix wrong query behaviour with slow network

algolia · Mar 31, 2017 · 84f7e40 · 84f7e40
1 parent 872abf8
commit 84f7e40
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/packages/react-instantsearch/src/components/List.js b/packages/react-instantsearch/src/components/List.js
@@ -51,7 +51,11 @@ class List extends Component {
     return extended ? limitMax : limitMin;
   };
 
-  renderItem = item => {
+  resetQuery = () => {
+    this.setState({query: ''});
+  }
+
+  renderItem = (item, resetQuery) => {
     const items = item.items &&
       <div {...this.props.cx('itemItems')}>
         {item.items.slice(0, this.getLimit()).map(child =>
@@ -70,7 +74,7 @@ class List extends Component {
           items && item.isRefined && 'itemSelectedParent'
         )}
       >
-        {this.props.renderItem(item)}
+        {this.props.renderItem(item, resetQuery)}
         {items}
       </div>
     );
@@ -96,11 +100,12 @@ class List extends Component {
 
   renderSearchBox() {
     const {cx, searchForItems, isFromSearch, translate, items, selectItem} = this.props;
+
     const noResults = items.length === 0 &&
       this.state.query !== '' ? <div {...cx('noResults')}>{translate('noResults')}</div> : null;
     return <div {...cx('SearchBox')}>
         <SearchBox
-          currentRefinement={isFromSearch ? this.state.query : ''}
+        currentRefinement={this.state.query}
           refine={value => {
             this.setState({query: value});
             searchForItems(value);
@@ -111,7 +116,7 @@ class List extends Component {
             e.preventDefault();
             e.stopPropagation();
             if (isFromSearch) {
-              selectItem(items[0]);
+              selectItem(items[0], this.resetQuery);
             }
           }}
         />
@@ -136,7 +141,7 @@ class List extends Component {
       <div {...cx('root', !this.props.canRefine && 'noRefinement')}>
         {searchBox}
         <div {...cx('items')}>
-          {items.slice(0, limit).map(item => this.renderItem(item))}
+          {items.slice(0, limit).map(item => this.renderItem(item, this.resetQuery))}
         </div>
         {this.renderShowMore()}
       </div>

diff --git a/packages/react-instantsearch/src/components/Menu.js b/packages/react-instantsearch/src/components/Menu.js
@@ -41,15 +41,15 @@ class Menu extends Component {
     if (this.context.canRefine) this.context.canRefine(props.canRefine);
   }
 
-  renderItem = item => {
-    const {refine, createURL} = this.props;
+  renderItem = (item, resetQuery) => {
+    const {createURL} = this.props;
     const label = this.props.isFromSearch
       ? <Highlight attributeName="label" hit={item}/>
       : item.label;
     return (
       <Link
         {...cx('itemLink', item.isRefined && 'itemLinkSelected')}
-        onClick={() => refine(item.value)}
+        onClick={() => this.selectItem(item, resetQuery)}
         href={createURL(item.value)}
       >
         <span {...cx('itemLabel', item.isRefined && 'itemLabelSelected')}>
@@ -63,7 +63,8 @@ class Menu extends Component {
     );
   };
 
-  selectItem = item => {
+  selectItem = (item, resetQuery) => {
+    resetQuery();
     this.props.refine(item.value);
   };
 

diff --git a/packages/react-instantsearch/src/components/RefinementList.js b/packages/react-instantsearch/src/components/RefinementList.js
@@ -44,11 +44,12 @@ class RefinementList extends Component {
     if (this.context.canRefine) this.context.canRefine(props.canRefine);
   }
 
-  selectItem = item => {
+  selectItem = (item, resetQuery) => {
+    resetQuery();
     this.props.refine(item.value);
   };
 
-  renderItem = item => {
+  renderItem = (item, resetQuery) => {
     const label = this.props.isFromSearch
       ? <Highlight attributeName="label" hit={item}/>
       : item.label;
@@ -59,7 +60,7 @@ class RefinementList extends Component {
           {...cx('itemCheckbox', item.isRefined && 'itemCheckboxSelected')}
           type="checkbox"
           checked={item.isRefined}
-          onChange={() => this.selectItem(item)}
+          onChange={() => this.selectItem(item, resetQuery)}
         />
         <span {...cx('itemBox', 'itemBox', item.isRefined && 'itemBoxSelected')}></span>
         <span {...cx('itemLabel', 'itemLabel', item.isRefined && 'itemLabelSelected')}>
@@ -90,6 +91,7 @@ class RefinementList extends Component {
             'withSearchBox',
             'canRefine',
           ])}
+          query={this.state.query}
         />
       </div>
     );