[Question] Clear All an also the query

[Kikobeats]

I'm trying to create a button for reset the current search query and current refinement selected.

Like <ClearAll /> but also for clear the query.

In the <Searchbox /> I did that with refine(''). I see that <ClearAll /> have a different refine behavior.

Could be possible do the same actions? any tip?

[mthuret]

Hi @Kikobeats,

Having a button that clear both the query and the refinements is something that we thought about including in our default widgets set.

Nonetheless, you can already achieve it like this:

const ClearQuery = ({refine}) => {
  const onClick = ev => {
    refine('');
    ev.stopPropagation();
  };
  return <div onClick={onClick}><ConnectedClearAllRefinements/></div>;
};

const ClearAllRefinements = ({refine, items}) => {
  const onClick = () => refine(items);
  return <button onClick={onClick}>ClearAll</button>;
};

const ClearQueryAndRefinements = connectSearchBox(ClearQuery);
const ConnectedClearAllRefinements = connectCurrentRefinements(ClearAllRefinements);

and use it like:

<ClearQueryAndRefinements />

[Kikobeats]

Thanks! The code is a little tricky but it works 😄

[Kikobeats]

Update: Just the query is cleared ☹️

[mthuret]

I tested it inside our storybook and it worked.

Any chance you have more information? Did you try to debug calls? Does both refine function gets called with right parameters?

[Kikobeats]

I copy paste your code and doesn't work, but maybe I'm doing something bad.

The implementation is here: https://github.com/windtoday/windtoday-marketplace/blob/master/src/app/Logo/index.js

And using it: https://github.com/windtoday/windtoday-marketplace/blob/master/src/app/AppBar/index.js#L30

🤔

[mthuret]

The onClick for the searchBox should be on an element wrapping the <ConnectedLogoWrapper/>.

[mthuret]

So here's an update of why it's working on my side and not on yours: it's working only if you are using React InstantSearch in an uncontrolled mode. Because you're using the searchState and onSearchStateChange props, then you are in controlled mode, and this tricks can't work.

I keep you updated about the development of a solution for this use case.

[Kikobeats]

Thanks for the reply and your effor, is awesome how algolia dev team interacts with the community!

🥇

[Kikobeats]

Finally I implement that using ClearAll component with clearsQuery option.

windtoday/windtoday-app@59f6d72#commitcomment-20978203

I'm using it with SearchBox component for detect if the user has typed something for be cleaned and make an animation.

This means, when the user type something at SearcBox, the query parameter has the value and I'm using it as boolean for do or not a shake animation.

Even "it works", I detected that query parameter always is undefiend, while items parameter is correct.

I didn't write this before becase I thought that is a little bug and will be fixed soon but I decide comment now for know if I'm still doing something wrong or wat 😢

Looks like ClearAll is capturing the query parameter and avoiding the propagation?

[mthuret]

Hi @Kikobeats,

The query is undefined if the props clearsQuery doesn't exist.

Here's a working example: when you use the searchbox, it display the content on an extra-div:

<InstantSearch>
    <SearchBox/>
    <CustomClearAll clearsQuery/>
</InstantSearch>

const CustomClearAll = connectCurrentRefinements(({query}) => <div>{query}</div>);

[Kikobeats]

oh thanks for the tip, now is working 🎉

[cmarabate]

So here's an update of why it's working on my side and not on yours: it's working only if you are using React InstantSearch in an uncontrolled mode. Because you're using the searchState and onSearchStateChange props, then you are in controlled mode, and this tricks can't work.

I keep you updated about the development of a solution for this use case.

Is there a solution for this yet?

I am using searchState and onSearchStateChange to add query params to my URL based on searchState and I am able to get the Clear All button clear the params from the URL but finding it impossible to have it also clear out what is typed the searchbox at the same time. It is driving me crazy that after clicking the button my users will also have to clear out what they typed in the search before searching for something else. I really wish this was the default behavior in all cases regardless if using searchState or not. I can't think of any case where I would not want the reset button to also clear the searchbox.

Thanks,

Chris

[francoischalifour]

@cmarabate Did you check out the clearsQuery prop on the ClearRefinements component?

[cmarabate]

@cmarabate Did you check out the clearsQuery prop on the ClearRefinements component?

Yes, that is what I am using to get it to clear the params from the URL.

It DOES clear the search value from the params but it It does NOT clear the value entered in the search box. So if a user wanted to clear all their selected filters and clear what they typed into the searchbox, they would need to click the button to clear all the filters and queries and then they would still need to manually remove what they typed into the searchbox themselves.

[cesarvarela]

This is also happening to me, my component using connectSerchBox doesn't get updated when the query is emptied.
I was missing am useEffect, still trying to use this library as a controlled component has been kind of nightmarish, in this case, the way the clearsQuery component works is too obscure. The way the query params appears in the list of items is soo wtf.

Adding a note here woudln't hurt I think.

[Haroenv]

That's indeed a good place to add a note about clearsQuery, does this sound good?

Note that clearsQuery(link) needs to be enabled for the query to be part of these items.

Or should the note rather be on refine. What do you think @cesarvarela?