[DataGrid] Improve the filtering panel UX

[chrishawn]

Summary 💡

I feel like the UX behavior should be if the filter dialog is open i should be able to remove all the rows (and if the last row is removed the dialog should close).

Examples 🌈

Motivation 🔦

it's not always obvious to people to click outside of the popup or the filters menu button to get the filtering panel closed. also if you have a rowclick event enabled and clicking off the filter can fire that event if not careful.

Order ID 💳 (optional)

31818

[flaviendelangle]

Closing the panel when deleting the last filter is quite simple.
I would be interested in the feedback of other users / of the rest of the team. Because both can make sense.

Meanwhile, you can implement a workaround like in this example
It is not perfect since you have a flickering but the code is very simple.

Alternatively, you can override the whole GridFilterPanel with components={{ FilterPanel: MyCustomFilterPanel }} but that will require copy pasting a lot of code so it is not very future proof.

[m4theushw]

On Airtable, deleting the last filter shows the following message:

For the DataGrid, I don't know why it was decided to do this way when the filter panel was created. We could close the panel when the last filter is deleted. cc @oliviertassinari

it's not always obvious to people to click of the dialog or the filters menu button to get it to toggle it closed. also if you have a rowclick event enabled and clicking off the filter can fire that event if not careful.

Only closing the panel when deleting the last filter won't solve this problem. The user could still mistakenly click in a row to close the panel. A better solution would be show a backdrop when any dialog is open. I don't mean a backdrop from Modal which hides the scrollbar, but a backdrop only on top of the virtual scroller. Also, Airtable uses this approach.

[oliviertassinari]

I think that we should have @danilo-leal redo the UX of the filtering panel for us, and freeze all changes until it's done or find a great reference to copy. For me, this pain is very close to #1777. The whole filter panel UX if not great (to be politically correct). This is reinforced from the feedback on the developer survey: https://www.notion.so/mui-org/Raw-data-aa374141dcb3453dbfea301dcc437126#75ded117ff3e4244be21fcdc53fdf98a 10 requests for "fix features - filtering".

In this instance, I personally got tricked multiple times in clicking the empty arrow to close the panel and then not understanding why nothing was apparently happening 🙈. I feel that this icon is wrong, it shouldn't look like a close icon.

This would already be clearer:

Actually, Airtable changed its design since the last time we work on the filtering. It seems to work well 👌

Same for Notion:

We could close the panel when the last filter is deleted.

@m4theushw Let's say there is one filter applied and you want to change the column you filter on.

Would you rather change the column select or remove the filter and add a new one? Personally, I'm more on the second group to make sure I start from a pristine state. In the end, I would be in favor of following the other existing tools in the space so that end-users don't have to learn new behavior from us. Instead, if they can rely on the expectation they have with Notion, Airtable, Excel, etc. I think that it's better.

[chrishawn]

tbh i like the current simple datagrid filters over airtables.
and i don't like either one having a floating filter box with no clearly indicated way to close it.
my suggestion was merely a simple way to achieve that without adding more ui elements to it.

[oliviertassinari]

no clearly indicated way to close it

True, we could consider a dedicated close button for the panel, with no other side effects.

[m4theushw]

I think we have two issues here: the confusing delete button and the rowClick being triggered when clicking in a row to close the filter panel.

For the first, we could be more explicit in the icon chosen. Use a trash icon when the filter can be removed and another icon when it behaves like a reset button. Or make the delete button to always delete and add an empty state message (like Airtable does).

For the second issue, we have the option of adding a backdrop on top of the virtual scroller to block any interaction while a panel is open. This solves part of the pain raised by the author while the filter panel UX can be addressed later.

[oliviertassinari]

the rowClick being triggered when clicking in a row to close the filter panel.

@m4theushw From my perspective, it's not an issue. It's part of the tradeoff to use Popper and not Popover. This is how many UIs behave. As an end-user I have personally been trained (using many different web apps) to close pop-ups like this by clicking on while area of the screen to avoid side click effects. I do it without even think of doing it.

[alexfauquette]

From issue #3841 we modifyed the behavior of this button.
If there is no more value to clean, ie item.value === undefined we delete the element and close the filter panel.

The why we made this choice is a tricky configuration, in which developers design filters which does not require value. In such case, it is was not possible to remove the filtering, because clicking on the cross was setting item.value to undefined but such item is filtering. So we had to delete the all item.

When you delete the filter item, the filter panel show the default one. So we would be in a situation where one visual state of the filter panel would correspond to 2 distinct states:

• see the default filter form and no filter is applied
• see the default filter form and this filter is applied

So we decided that when removing the last item, the filter panel close.

---

For now, if item.value contains something, it still clean it. I think the delete filter item and the clean input should be distinct button, with the button cleaning the value inside the value input