Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
JasonStoltz opened this issue Feb 13, 2019 · 7 comments

Comments

@JasonStoltz
Copy link
Member

JasonStoltz commented Feb 13, 2019

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
Copy link

botelastic bot commented Mar 9, 2020

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.

@botelastic botelastic bot added the wontfix This will not be worked on label Mar 9, 2020
@botelastic botelastic bot closed this as completed Mar 16, 2020
@gallbrook
Copy link

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

@JasonStoltz
Copy link
Member Author

Not currently

@JasonStoltz JasonStoltz reopened this May 5, 2020
@botelastic botelastic bot removed the wontfix This will not be worked on label May 5, 2020
@jcla490
Copy link

jcla490 commented Jul 1, 2021

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
Copy link
Member Author

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
Copy link

jcla490 commented Jul 1, 2021

@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
Copy link

jcla490 commented Jul 2, 2021

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

@JasonStoltz JasonStoltz changed the title Sticky Filters Ability to prevent filters resetting on new searches at an individual filter level Jul 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants