From 08a11663f62033e0e1cd52175debe426e3163c5e Mon Sep 17 00:00:00 2001
From: Mohamed Fall <ps.hackmaster@gmail.com>
Date: Thu, 12 Mar 2026 16:32:56 +0000
Subject: [PATCH 1/2] fix(ToolbarFilter): clear on unmount and refactor
 category key retrieval

---
 .../src/components/Toolbar/ToolbarFilter.tsx  | 32 ++++++++-----------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
index 7284e853426..3bef32e9d71 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
@@ -62,25 +62,24 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
     };
   }
 
+  getCategoryKey = () => {
+    const { categoryName } = this.props;
+    return typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
+      ? categoryName.key
+      : categoryName.toString();
+  };
+
   componentDidMount() {
-    const { categoryName, labels } = this.props;
-    this.context.updateNumberFilters(
-      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
-        ? categoryName.key
-        : categoryName.toString(),
-      labels.length
-    );
+    this.context.updateNumberFilters(this.getCategoryKey(), 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(this.getCategoryKey(), this.props.labels.length);
+  }
+
+  componentWillUnmount() {
+    this.context.updateNumberFilters(this.getCategoryKey(), 0);
   }
 
   render() {
@@ -99,10 +98,7 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
     } = 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 = this.getCategoryKey();
 
     const labelGroup = labels.length ? (
       <ToolbarItem variant="label-group">

From b201c6128020901b9da6cc1d93fc2ef88a29e089 Mon Sep 17 00:00:00 2001
From: Mohamed Fall <ps.hackmaster@gmail.com>
Date: Fri, 13 Mar 2026 09:50:38 +0000
Subject: [PATCH 2/2] fix(ToolbarFilter): refactor getCategoryKey function

---
 .../src/components/Toolbar/ToolbarFilter.tsx  | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx b/packages/react-core/src/components/Toolbar/ToolbarFilter.tsx
index 3bef32e9d71..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<ToolbarFilterProps, ToolbarFilterState> {
   static displayName = 'ToolbarFilter';
   static contextType = ToolbarContext;
@@ -62,24 +69,17 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
     };
   }
 
-  getCategoryKey = () => {
-    const { categoryName } = this.props;
-    return typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
-      ? categoryName.key
-      : categoryName.toString();
-  };
-
   componentDidMount() {
-    this.context.updateNumberFilters(this.getCategoryKey(), this.props.labels.length);
+    this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), this.props.labels.length);
     this.setState({ isMounted: true });
   }
 
   componentDidUpdate() {
-    this.context.updateNumberFilters(this.getCategoryKey(), this.props.labels.length);
+    this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), this.props.labels.length);
   }
 
   componentWillUnmount() {
-    this.context.updateNumberFilters(this.getCategoryKey(), 0);
+    this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), 0);
   }
 
   render() {
@@ -98,7 +98,7 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
     } = this.props;
     const { isExpanded: managedIsExpanded, labelGroupContentRef } = this.context;
     const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
-    const categoryKey = this.getCategoryKey();
+    const categoryKey = getCategoryKey(categoryName);
 
     const labelGroup = labels.length ? (
       <ToolbarItem variant="label-group">
@@ -112,11 +112,11 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
         >
           {labels.map((label) =>
             typeof label === 'string' ? (
-              <Label variant="outline" key={label} onClose={() => deleteLabel(categoryKey, label)}>
+              <Label variant="outline" key={label} onClose={() => deleteLabel?.(categoryKey, label)}>
                 {label}
               </Label>
             ) : (
-              <Label key={label.key} onClose={() => deleteLabel(categoryKey, label)}>
+              <Label key={label.key} onClose={() => deleteLabel?.(categoryKey, label)}>
                 {label.node}
               </Label>
             )
@@ -129,7 +129,7 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
       return (
         <Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {labelGroupContentRef?.current?.firstElementChild !== null &&
+          {labelGroupContentRef?.current?.firstElementChild &&
             ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
         </Fragment>
       );