fix(sffv): when using a large limit, retain the search (#2163)

In the case we're using the widget with a very big limit (number of
items displayed) in the refinement list, we often still have a huge
number of items. Therefore we should be able to continue searching
in the list, even though all the items are displayed.

Fixes #2156

Author: bobylito

dev/app.js

@@ -207,6 +207,31 @@ search.addWidget(
   })
 );
 
+search.addWidget(
+  instantsearch.widgets.refinementList({
+    container: '#searchable-brands-alwaysActive',
+    attributeName: 'brand',
+    operator: 'or',
+    limit: 10,
+    cssClasses: {
+      header: 'facet-title',
+      item: 'facet-value checkbox',
+      count: 'facet-count pull-right',
+      active: 'facet-active',
+    },
+    templates: {
+      header: 'Searchable brands',
+    },
+    searchForFacetValues: {
+      placeholder: 'Find other brands...',
+      templates: {
+        noResults: 'No results',
+      },
+      isAlwaysActive: true,
+    },
+  })
+);
+
 search.addWidget(
   instantsearch.widgets.refinementList({
     collapsible: {

dev/index.html

@@ -23,6 +23,7 @@ <h1><a href="./">Instant search demo</a> <small>using instantsearch.js</small></
         <div class="facet" id="current-refined-values"></div>
         <div class="facet" id="hierarchical-categories"></div>
         <div class="facet" id="searchable-brands"></div>
+        <div class="facet" id="searchable-brands-alwaysActive"></div>
         <div class="facet" id="brands"></div>
         <div class="facet" id="brands-2"></div>
         <div class="facet" id="price-range"></div>

src/components/RefinementList/RefinementList.js

@@ -160,13 +160,15 @@ class RefinementList extends React.Component {
         /> :
         undefined;
 
+    const shouldDisableSearchInput =
+      this.props.searchIsAlwaysActive !== true &&
+      !(this.props.isFromSearch || displayedFacetValues.length >= limit);
     const searchInput = this.props.searchFacetValues ?
-      <SearchBox ref={i => { this.searchbox = i; }}
-        placeholder={this.props.searchPlaceholder}
-        onChange={this.props.searchFacetValues}
-        onValidate={() => this.refineFirstValue()}
-        disabled={!this.props.isFromSearch && displayedFacetValues.length < limit}/> :
-      null;
+        <SearchBox ref={i => { this.searchbox = i; }}
+          placeholder={this.props.searchPlaceholder}
+          onChange={this.props.searchFacetValues}
+          onValidate={() => this.refineFirstValue()}
+          disabled={shouldDisableSearchInput}/> : null;
 
     const noResults = this.props.searchFacetValues && this.props.isFromSearch && this.props.facetValues.length === 0 ?
       <Template
@@ -205,6 +207,7 @@ RefinementList.propTypes = {
   toggleRefinement: React.PropTypes.func.isRequired,
   searchFacetValues: React.PropTypes.func,
   searchPlaceholder: React.PropTypes.string,
+  searchIsAlwaysActive: React.PropTypes.bool,
   isFromSearch: React.PropTypes.bool,
 };
 

src/widgets/refinement-list/refinement-list.js

@@ -26,6 +26,8 @@ const bem = bemHelper('ais-refinement-list');
  * @param  {string} [options.limit=10] How much facet values to get. When the show more feature is activated this is the minimum number of facets requested (the show more button is not in active state). [*]
  * @param  {object|boolean} [options.searchForFacetValues=false] Add a search input to let the user search for more facet values
  * @param  {string} [options.searchForFacetValues.placeholder] Value of the search field placeholder
+ * @param  {boolean} [options.searchForFacetValues.isAlwaysActive=false] When `false` the search field will become disabled if
+ * there are less items to display than the `options.limit`, otherwise the search field is always usable.
  * @param  {string} [options.searchForFacetValues.templates] Templates to use for search for facet values
  * @param  {string} [options.searchForFacetValues.templates.noResults] Templates to use for search for facet values
  * @param  {object|boolean} [options.showMore=false] Limit the number of results and display a showMore button
@@ -68,7 +70,7 @@ refinementList({
   [ collapsible=false ],
   [ showMore.{templates: {active, inactive}, limit} ],
   [ collapsible=false ],
-  [ searchForFacetValues.{placeholder, templates: {noResults}}],
+  [ searchForFacetValues.{placeholder, templates: {noResults}, isAlwaysActive}],
 })`;
 function refinementList({
     container,
@@ -165,6 +167,7 @@ function refinementList({
         toggleRefinement={toggleRefinement}
         searchFacetValues={searchFacetValues}
         searchPlaceholder={searchForFacetValues.placeholder || 'Search for other...'}
+        searchIsAlwaysActive={searchForFacetValues.isAlwaysActive || false}
         isFromSearch={isFromSearch}
       />,
       containerNode