Make Toolbar a controlled component so that selected filters can be managed externally

[danwatford]

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:

export const ToolbarFilter = (props: IExtendedToolbarFilterProps) => {
  const {
    layout,
    filters,
    selectedFilterIds: externalSelectedFilters,
    singleSelect,
    open,
    onOpenChange,
    toolbarMenuProps,
  } = props;
  const [selectedFilters, setSelectedFilters] = React.useState<string[]>([]);
  const propagateSetSelectedFilters = (eventSelectedFilters: string[]) =>
    setSelectedFilters(
      (props.onSelectedFiltersChange || passThrough)(eventSelectedFilters)
    );

  React.useEffect(() => {
    if (externalSelectedFilters) {
      setSelectedFilters(externalSelectedFilters);
    }
  }, [externalSelectedFilters]);

The above allows the control to be used in both controlled and uncontrolled modes.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions]

Thank you for submitting your first issue to this project.

[AJIXuMuK]

@danwatford - thanks for suggestion!
Please, feel free to submit the PR!