Make Toolbar a controlled component so that selected filters can be managed externally #1222
Labels
status:fixed-next-drop
Issue will be fixed in upcoming release.
type:enhancement
New feature or enhancement of existing capability
Milestone
Category
[X] Enhancement
[ ] Bug
[ ] Question
Version
Please specify what version of the library you are using: [ 3.7.2 ]
Desired Behavior
The Toolbar control currently maintains the set of selected filters as internal state, and communicates changes in this internal state to its parent component via calls to a function passed as the onSelectedFiltersChange property.
I would like to use Toolbar as a controlled component where the set of selected filters is maintained externally.
The usecase for this is to set the initial set of filters that correspond to the default view of a list, and to allow changes to the current set of selected filters based on interaction with other UI components, such as dashboard indicators.
Observed Behavior
The onSelectedFiltersChange function does provide a way for the set of selected filters to be influenced externally. This function is called whenever the user interacts with the rendered filter tree or the Clear filters button with the new set of selected filters. The returned array from this function is used by the Toolbar to set the set of selected filters.
We can use our implementation of the onSelectedFiltersChange function to enable filters that the user has not manually activated. However this function is only called in response to a user interaction with the filter tree.
Initial implementation available
I have tested a basic implementation and can create a PR. It boils down to a change in ToolbarFilter.tsx similar involving a new optional prop, selectedFilterIds and a useEffect to apply changes in selectFilterIds to the internal filter state:
The above allows the control to be used in both controlled and uncontrolled modes.
The text was updated successfully, but these errors were encountered: