Ability to prevent filters resetting on new searches at an individual filter level

[JasonStoltz]

When a new search is performed, do NOT clear this filter. This should be an option on facets, and also an option on setFilter / addFilter actions.

This is mentioned here:

https://github.com/elastic/search-www.elastic.co/issues/29

ex.

<Facet field="state" sticky />

setFilter('category', 'all', { sticky: true })

It's important to note that you can currently take an all-or-nothing approach when updating the search term using the shouldClearFilters flag. The only current limitation here is that you cannot selectively choose to preserve or remove individual filters.

[botelastic[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

[gallbrook]

I'm interested in setting a filter to be sticky. Is there any way to achieve this currently?

[JasonStoltz]

Not currently

[jcla490]

Any chance we'll see some progress on this soon? I have a use case where it would be nice to preserve the user's filters (location-based) for subsequent queries.

[JasonStoltz]

If you want to preserve all filters on subsequent searches you can use the shouldClearFilters option on the SearchBox component. Just set it to false. Let me know if that works for your use case or not.

[jcla490]

@JasonStoltz thank you for the crazy fast response. I am unable to get this option to work on <SearchBox>. Here's a snippet of the component along with some context, do you see anything that could be preventing this functionality?

<WithSearch
        mapContextToProps={({ wasSearched, setSearchTerm }) => ({
          wasSearched,
          setSearchTerm,
        })}
      >
        {({ wasSearched, setSearchTerm }) => {
          return (
            <div className="SearchArea">
              <ErrorBoundary>
                <Layout
                  header={
                    <div id="search-header">
                      <div className="relative-search-container">
                        <SearchBox
                          autocompleteSuggestions={true}
                          autocompleteMinimumCharacters={3}
                          shouldClearFilters={false}
                          inputProps={{ placeholder: "dummy_item" }}
                          onSubmit={(searchTerm) =>
                            !searchTerm && searchTerm.length === 0
                              ? handleSearchError()
                              : setSearchTerm(searchTerm)
                          }
                          inputView={({
                            getAutocomplete,
                            getInputProps,
                            getButtonProps,
                          }) => (
                            <>
                              <div className="sui-search-box__wrapper">
                                <input {...getInputProps({})} />

                                {getAutocomplete()}
                              </div>

                              <div className="sui-search-box__input-container">
                                <i className="sui-search-box__icon fas fa-search"></i>

                                <input
                                  {...getButtonProps({
                                    "data-custom-attr": "some value",
                                  })}
                                />
                              </div>
                            </>
                          )}
                        />

                        {showEmptyQueryStringMessage ? (
                          <p className="error-message">
                            Please enter a search term before searching.
                          </p>
                        ) : (
                          ""
                        )}
                      </div>

                      <Breadcrumb className="breadcrumb" id="search-breadcrumb">
                        <Link to="/" className="breadcrumb-link">
                          <i className="fas fa-home"></i> Home
                        </Link>
                        <Link to="" className="breadcrumb-active-link">
                          Search
                        </Link>
                      </Breadcrumb>
                    </div>
                  }
                  sideContent={
                    <div>
                      <Facet
                        field="dummy_item"
                        label="dummy_item"
                        view={SingleLinksFacet}
                      />
                      <Facet
                        field="dummy_item"
                        label="dummy_item"
                        filterType="any"
                      />
                      <Facet
                        field="dummy_item"
                        label="dummy_item"
                        filterType="any"
                        isFilterable={true}
                        searchPlaceholder="dummy_item"
                      />
                      <Facet
                        field="dummy_item"
                        label="dummy_item"
                        filterType="any"
                        isFilterable={true}
                        searchPlaceholder="dummy_item"
                      />
                    </div>
                  }
                  bodyContent={
                    <Results
                      resultView={StoreListItem}
                      shouldTrackClickThrough={true}
                    />
                  }
                  bodyHeader={
                    <React.Fragment>
                      {wasSearched && <PagingInfo />}
                      {wasSearched && <ResultsPerPage options={[5, 15, 30]} />}
                    </React.Fragment>
                  }
                  bodyFooter={<Paging />}
                />
              </ErrorBoundary>
            </div>
          );
        }}
      </WithSearch>

[jcla490]

I figured this out, i put it in the wrongggggg place