How to use Combobox in Table filter ?

[mathieu-fournier]

I am trying to do a custom filter in the Table.
It is a text predefined choices multi-selection filter.
I am having trouble using a combobox like stated in the guidelines, the styles does not seem compatible with Table Filter:
Predefined choices section of the Guidelines : https://ux.bentley.com/itwin/patterns/column-filter.html#type-predefined

I made a codesandbox for it : https://codesandbox.io/s/table-filter-multi-select-k4r4wz
I tried adding custom styles to make it work, but it does not seems correct.

At first, I used radio buttons like in the storybook example and it worked just fine :
https://itwin.github.io/iTwinUI/react/?path=/story/core-table--custom-filter

Can someone help me using combobox there ?
Or is it okay if I use radio buttons, or should I follow the guidelines. I am not sure what I should do now ?

Note :
In my case, filtering happens on the server side, so no "frontend" filtering is required here.
The custom filter only need to send the selection state to the parent component.

[mayank99]

I'm not sure I understand what you're trying to achieve here. If you just need a combobox, you should be able to use it inside your custom filter without any custom styles (except maybe a max-width). What difficulty are you facing exactly?

It's also worth noting that those UX guidelines are outdated and unmaintained. We recommend consulting with your product's UX designer for (potentially) new guidelines.

[mathieu-fournier]

It's the combination of the two that makes the combobox unusable.

What I expect is :

• To have the dropdown displayed inside the filter popup. Between the search and the buttons. Not fixed on top.
• To be able to select many options without it closing.
• The selection to persist when closing re-opening the filter.
• To be able to click the filter/clear buttons at all times.

I addressed this part above, where i said the dropdown can be closed in multiple ways to show the "Filter" button again.

The dropdown need to stay open because the user might want to select many options.
The buttons need to be visible at all time, else the user might get confused why selecting an option did not trigger any immediate effect.

This part is new (re-reading the entire thread, i don't see any previous mention of it).

This is the first issue I mentionned, but in different words :

I only want the filter to apply when the Filter button is clicked. In the codesandbox, when a option is selected, the filter closes and the selection is lost (because we weren't able to click the filter button before it closed).

[r100-stack]

What I expect is :

• The selection to persist when closing re-opening the filter.

To persist the selection, I believe the dependency array on L27 of App.tsx needs to contain Filter (updated sandbox)

[mathieu-fournier]

I can't make it work with itwin-ui v2 : https://codesandbox.io/s/table-filter-multi-select-base-example-9mrn5l
Also, the clear buttons would be really nice to have still.
Plus the possibility to only update the parent when we are done adding all options. Like the 'Filter' button. Else we might trigger a http call for every option clicked.

[mayank99]

here is a new sandbox showing how you can avoid ComboBox and use SearchBox to filter a list of checkboxes while keeping the "Filter"/"Clear" buttons: https://codesandbox.io/s/table-filter-multi-select-base-example-forked-46jpmt?file=/src/custom-filter.tsx

[mathieu-fournier]

@mayank99

The filter never gets the "active state" when a filter is applied.

Expected :

[mayank99]

well this is a contrived example where the filters are not actually hooked up to the table.

you can use setFilter and clearFilter props to communicate with the table.

- Filter: ({ close }) => (
+ Filter: ({ close, setFilter, clearFilter }) => (
   <CustomFilter
     initialSelection={appliedFilters}
     onChange={(filters) => {
       setAppliedFilters(filters);
+      if (filters.length) {
+        setFilter(filters);
+      } else {
+        clearFilter();
+      }
       close();
     }}
     placeholder="placholder"
   />
 )

[mathieu-fournier]

This only works for frontend filtering, with server-side filtering, when new data is applied to the table, the table filters are reset.
They are still checked in the Custom filter popup tho.
Is there a way to prevent the table from reseting it's filter when new data is applied ?

[mayank99]

you can pass autoResetFilters={false} to the Table