diff --git a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx index 7284e853426..6b6c7a4cbb5 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx @@ -46,6 +46,13 @@ interface ToolbarFilterState { isMounted: boolean; } +const getCategoryKey = (categoryName: string | ToolbarLabelGroup): string => { + if (typeof categoryName === 'string') { + return categoryName; + } + return categoryName.key; +}; + class ToolbarFilter extends Component { static displayName = 'ToolbarFilter'; static contextType = ToolbarContext; @@ -63,24 +70,16 @@ class ToolbarFilter extends Component { } componentDidMount() { - const { categoryName, labels } = this.props; - this.context.updateNumberFilters( - typeof categoryName !== 'string' && categoryName.hasOwnProperty('key') - ? categoryName.key - : categoryName.toString(), - labels.length - ); + this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), this.props.labels.length); this.setState({ isMounted: true }); } componentDidUpdate() { - const { categoryName, labels } = this.props; - this.context.updateNumberFilters( - typeof categoryName !== 'string' && categoryName.hasOwnProperty('key') - ? categoryName.key - : categoryName.toString(), - labels.length - ); + this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), this.props.labels.length); + } + + componentWillUnmount() { + this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), 0); } render() { @@ -99,10 +98,7 @@ class ToolbarFilter extends Component { } = this.props; const { isExpanded: managedIsExpanded, labelGroupContentRef } = this.context; const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded; - const categoryKey = - typeof categoryName !== 'string' && categoryName.hasOwnProperty('key') - ? categoryName.key - : categoryName.toString(); + const categoryKey = getCategoryKey(categoryName); const labelGroup = labels.length ? ( @@ -116,11 +112,11 @@ class ToolbarFilter extends Component { > {labels.map((label) => typeof label === 'string' ? ( -