fix(Toolbar filter): Fixed null exception in Toolbar filter (#12352)

* fix(Toolbar filter): Fixed null exception in Toolbar filter

* update from pr review

Author: tlabaj

packages/react-core/src/components/Toolbar/ToolbarFilter.tsx

@@ -130,26 +130,29 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
     ) : null;
 
     if (!_isExpanded && this.state.isMounted) {
+      const collapsedLabelPortalTarget = labelGroupContentRef?.current?.firstElementChild ?? null;
       return (
         <Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {labelGroupContentRef?.current?.firstElementChild !== null &&
-            ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
+          {collapsedLabelPortalTarget !== null && ReactDOM.createPortal(labelGroup, collapsedLabelPortalTarget)}
         </Fragment>
       );
     }
 
     return (
       <ToolbarContentContext.Consumer>
-        {({ labelContainerRef }) => (
-          <Fragment>
-            {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-            {labelContainerRef.current && ReactDOM.createPortal(labelGroup, labelContainerRef.current)}
-            {expandableLabelContainerRef &&
-              expandableLabelContainerRef.current &&
-              ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
-          </Fragment>
-        )}
+        {({ labelContainerRef }) => {
+          const labelContainer = labelContainerRef?.current ?? null;
+          return (
+            <Fragment>
+              {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
+              {labelContainer !== null && ReactDOM.createPortal(labelGroup, labelContainer)}
+              {expandableLabelContainerRef &&
+                expandableLabelContainerRef.current &&
+                ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
+            </Fragment>
+          );
+        }}
       </ToolbarContentContext.Consumer>
     );
   }

packages/react-core/src/components/Toolbar/__tests__/ToolbarFilter.test.tsx

@@ -0,0 +1,54 @@
+import { createRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { ToolbarContext } from '../ToolbarUtils';
+import { ToolbarFilter } from '../ToolbarFilter';
+
+describe('ToolbarFilter', () => {
+  it('renders when ToolbarFilter is not under Toolbar or ToolbarContent (default context)', () => {
+    const deleteLabel = jest.fn();
+    const deleteLabelGroup = jest.fn();
+
+    expect(() =>
+      render(
+        <ToolbarFilter
+          labels={['one']}
+          deleteLabel={deleteLabel}
+          deleteLabelGroup={deleteLabelGroup}
+          categoryName="Status"
+        >
+          filter content
+        </ToolbarFilter>
+      )
+    ).not.toThrow();
+
+    expect(screen.getByText('filter content')).toBeInTheDocument();
+  });
+
+  it('does not throw when labelGroupContentRef.current is still null while collapsed (listed filters)', () => {
+    const labelGroupContentRef = createRef<HTMLDivElement>();
+    expect(labelGroupContentRef.current).toBeNull();
+
+    expect(() =>
+      render(
+        <ToolbarContext.Provider
+          value={{
+            isExpanded: false,
+            toggleIsExpanded: () => {},
+            labelGroupContentRef,
+            updateNumberFilters: () => {},
+            numberOfFilters: 0,
+            clearAllFilters: () => {}
+          }}
+        >
+          <ToolbarFilter labels={['one']} deleteLabel={jest.fn()} deleteLabelGroup={jest.fn()} categoryName="Status">
+            filter content
+          </ToolbarFilter>
+        </ToolbarContext.Provider>
+      )
+    ).not.toThrow();
+
+    expect(screen.getByText('filter content')).toBeInTheDocument();
+  });
+});