Devtools (React) "Filter" field, when used, makes "Sort" dropdown, "Asc / Desc" and "offline" buttons disappear

[emzoumpo]

Describe the bug

The "Filter" field of Devtools makes the other fields (Sort, asc/desc, offline) disappear when used.
Even though the are used to sort the filtered results, one can only change the sorting and the rest of the options when the "filter" field is cleared.

Your minimal, reproducible example

Attached video below

Steps to reproduce

1. Open Tanstack (React) Query Devtools
2. Add a filter on the "filter" field
3. The rest of the fields disappear

Expected behavior

As a user, I expect the fields to not disappear when populating some of them with data.

How often does this bug happen?

Every time

Screenshots or Videos

filter-field.mov

Platform

Mac OS, Chrome 110

TanStack Query version

v4.24.4

TypeScript version

v4.9.5

Additional context

No response

[TkDodo]

looking at the code, we do have a condition to only render the rest when there is no filter. But that seems weird to me. Maybe sorting wasn't needed when something was filtered, but I'd rather keep the ui the same all the time.

would you like to contribute a fix ?

[emzoumpo]

@TkDodo I'd be happy to contribute a fix!