fix(sffv): disable sffv input when few facet values FIX #2111 #2120
Conversation
When the number of items displayed in a refinement list is lower than the max number of facet displayed, the search for facet input should be disabled. This fix disable the input and adds a new classname to identify the state of the input.
src/components/SearchBox/index.js
Outdated
| @@ -42,7 +46,7 @@ export default class SearchBox extends React.Component { | |||
| </svg> | |||
|
|
|||
| <div role="search" className="sbx-sffv__wrapper"> | |||
| <input type="search" name="search" placeholder={placeholder} autoComplete="off" required="required" className="sbx-sffv__input" onChange={e => onChange(e.target.value)} ref={i => { this.input = i; }} /> | |||
| {searchInput} | |||
There was a problem hiding this comment.
what about {...this.props.disabled} /> instead of passing two different items
|
Deploy preview ready! Built with commit 2757305 https://deploy-preview-2120--algolia-instantsearch.netlify.com |
|
Deploy preview ready! Built with commit a41c7c6 https://deploy-preview-2120--algolia-instantsearch.netlify.com |
| @@ -164,7 +164,8 @@ class RefinementList extends React.Component { | |||
| <SearchBox ref={i => { this.searchbox = i; }} | |||
| placeholder={this.props.searchPlaceholder} | |||
| onChange={this.props.searchFacetValues} | |||
| onValidate={() => this.refineFirstValue()}/> : | |||
| onValidate={() => this.refineFirstValue()} | |||
| disabled={displayedFacetValues.length < limit}/> : | |||
There was a problem hiding this comment.
this disables it as well when you're searching
|
Should be good @Haroenv |
|
Hi @bobylito ( cc @Haroenv ; @seafoox ), I'm having an issue with my SearchBox , this PR may be the cause. See on my website : https://www.shopsquare.fr/mode/femme/bomber . We have numerous filters with SearchBox on this page, but since this this fix has been deployed ; none of the SearchBox seems to be working. See how all our filters' SearchBox (couleurs, marques ...) are disabled when they should not ? My end-users are actually crying :( Why are the inputs disabled ? Because, even if we limit the results to 100 items , we still use an css overflow rule so the user is able to see all results by scrolling, while only displaying less items on the page at the same time .
Here we are limiting the request to fetch a maximum of 100 results in our code, so even if we only display ~8 to the user at the same time ; we still provide a way to scroll thru the entire set (css overflow). So even if this feature can be useful in some case, I think it should be easily disabled by config. And if you want my full opinion, I do not think it should be the default behaviour. A visible, but disabled input is always a bad experience for the user, IMO. Right now I going to have use a previous or modified version of the library ( without this fix ) on our website, which is not ideal. Could you provide me with a way to recover the initial behaviour so we at Shopsquare can sync with the CDN version ? Cheers :) ping @julienpa |
|
Hey @gabriel-kaam, this should not cause your inputs to be disabled, we will look into how to support both the use case and the use case this pull request fixed. For now the only solution is to use an older version or a custom version of the library. Thanks for opening the discussion |
|
I’d love to be able to replicate how you load the extra facets, could you leave more info in #2156 @gabriel-kaam? |
When the number of items displayed in a refinement list is lower than
the max number of facet displayed, the search for facet input should be
disabled.
This fix disables the input and adds a new classname to identify the
state of the input.
Result
staging default: the search input is not disabled.
fixes #2111
staging with a query that limits the items: the input is disabled.