Filter Group behavior question

[jalexy12]

Hey all,

Checking in because I ran into a question when running through the filter group examples today: https://codesandbox.io/s/default-filter-group-rloskb?file=/src/components/DefaultFilterGroup.tsx

Reproduction steps:

1. Select "Web RTC Go" Room Type filter
2. Type any value into the search bar
3. Click "Clear Filter"

result: the searchbar is cleared

Next:

1. Type any value into the search bar

result: clear filter button is disabled

Question from my side: Is Search supposed to be a clearable filter? Ie, if I type in the searchbar, should Clear Filter be enabled and clear the search bar, or should Clear Filter not clear the search bar?

The reason I ask is because we had someone put all of the filters for a page on one line. In the case where Search is a filter like any of the other filters, then this layout works. Otherwise, we'd have to split on two lines like the example in the docs.

Thanks!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hello!

The "Clear Filter" button is designed to revert all filter parameters back to their default state. In the case of the search bar, its default state is empty. So, when you click "Clear Filter", it should indeed clear the search bar.

Here's the relevant part from the documentation:

The default value for all filters should be the “All” option, and when the “Clear all” link style button is clicked it should revert all filter parameters back to this default state.

As for the "Clear Filter" button being disabled after typing a value into the search bar, it should actually be enabled. The button is designed to be in the disabled state on page load, and would enable when at least one of the filter parameters value is changed from the previous state. Here's the relevant part from the documentation:

The “Apply” and “Clear all” buttons should be in the disabled state on page load, and would enable when at least one of the filter parameters value is changed from the previous state.

So, in your case, if the "Clear Filter" button is not enabling after typing into the search bar, it might be a bug.

I hope this helps! Let me know if you have any other questions.

---

Here are some similar discussions:

• Search Field - Answer (updated: 2022-07-22T09:45:08Z, similarity score: 0.86)
• Bigger search component with clear - Answer (updated: 2022-09-13T21:46:52Z, similarity score: 0.85)
• Search field pattern - Answer (updated: 2022-07-11T20:52:09Z, similarity score: 0.85)

[SiTaggart]

Hi @jalexy12

I think, honestly, it's an old example and it's a little buggy.

I get why we probably disabled the buttons, but our own guidance is that you shouldn't, ever. Coupled with the fact there is a bug in that logic, where other filters enable the Apply button when a value is selected, but the search field does not, makes this whole thing kind of confusing.

Worth noting that the "clear" button is actually labelled "Clear all" so the intention is that it clears all filters for the list view.

Ultimately, they should all be the same. Search is a filter, just like the rest. The filtering should only occur on submit or press of apply. The "Clear all" button should reset all filters.

I might say that the search filter could be improved by having it's own clear button, just like unselecting a value in the other fields. And, I suspect, "Clear all" is probably not the best button text and could be improved. Maybe it should read "Reset filters"?

We'll be updating these in the future, so thanks for stress testing these for us!

[jalexy12]

Thanks @SiTaggart !

Given that - is there any pro/con to putting the filters and searchbar in one line? I noticed all the examples have a 2 line split for filters/search - is there reasoning for that or is it mainly decorative / a way to split up the content?

[SiTaggart]

No, I think it's just to show that you don't have to put everything on one line if you don't have the room.

In the future, we might deep dive on "the way to do filter bars" and have some super strong opinions on placement of specific types of filter fields. It might be a bit much to ask though give the vast variability of the applications we support.

[jalexy12]

ok great, thanks!