DataViewFilters breaks ToolbarFilter in prerelease version: missing ToolbarContentContext

[sg00dwin]

Description:

OCP recently updated it Custom Resource Definitions lists page from a PatternFly Table to the DataView extension (openshift/console#15469 openshift/console#15375) and now when loading that screen the following error occurs.

Error Message:

TypeError: Cannot read properties of null (reading 'current')
    at children (ToolbarFilter.tsx:147)

When using ToolbarFilter from @patternfly/react-core as a child of DataViewFilters from @patternfly/react-data-view, the application crashes with a null reference error in prerelease versions, but works fine in stable versions.

Affected Versions:

Works:

• @patternfly/react-core: ^6.2.2
• @patternfly/react-data-view: ^6.2.0

Breaks:

• @patternfly/react-core: 6.4.0-prerelease.2
• @patternfly/react-data-view: 6.4.0-prerelease.3

---

Root Cause:

ToolbarFilter (from @patternfly/react-core) has two rendering code paths:

1. Non-expanded path (lines 132-140): Uses labelGroupContentRef from ToolbarContext - works without ToolbarContentContext
2. Expanded path (lines 142-154): Requires ToolbarContentContext.Consumer to access labelContainerRef

// ToolbarFilter.tsx lines 142-154
return (
  <ToolbarContentContext.Consumer>
    {({ labelContainerRef }) => (
      <Fragment>
        {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
        {labelContainerRef.current && ReactDOM.createPortal(labelGroup, labelContainerRef.current)}
        ...
      </Fragment>
    )}
  </ToolbarContentContext.Consumer>
);

In stable versions: The condition !_isExpanded && this.state.isMounted evaluates to true, taking the non-expanded path.

In prerelease versions: Something changed that makes _isExpanded evaluate to true or the condition fails, forcing the expanded path which requires ToolbarContentContext.

DataViewFilters (from @patternfly/react-data-view in this repo) creates a toolbar structure using ToolbarToggleGroup and ToolbarGroup but does not provide ToolbarContentContext, causing labelContainerRef to be null and the .current access to fail at line 147.

---

Steps to Reproduce:

1. Install prerelease versions of PatternFly packages
2. Create a component using DataViewFilters with a custom filter based on ToolbarFilter:

import { ToolbarFilter } from '@patternfly/react-core';
import { DataViewFilters } from '@patternfly/react-data-view';

const MyLabelFilter = ({ filterId, title, showToolbarItem, onChange }) => {
  const [searchParams] = useSearchParams();
  const labelSelection = searchParams.get(filterId)?.split(',').filter(Boolean) ?? [];
  
  return (
    <ToolbarFilter
      categoryName={title}
      labels={labelSelection}
      showToolbarItem={showToolbarItem}
      deleteLabel={(category, label) => {
        onChange?.(filterId, labelSelection.filter(l => l !== label).join(','));
      }}
    >
      {/* Filter input UI */}
    </ToolbarFilter>
  );
};

// Usage
<DataViewFilters values={filters} onChange={onSetFilters}>
  <DataViewTextFilter filterId="name" title="Name" />
  <MyLabelFilter filterId="label" title="Label" />
</DataViewFilters>

3. Navigate to the page and try to use the filter
4. Result: Application crashes with TypeError: Cannot read properties of null (reading 'current')

---

Expected Behavior:

ToolbarFilter should work within DataViewFilters consistently across versions, or the limitation should be documented.

---

Actual Behavior:

In prerelease versions, using ToolbarFilter within DataViewFilters causes a runtime error because the required ToolbarContentContext is not provided.

---

Additional Context:

This appears to be a breaking change between stable and prerelease versions. The issue is blocking adoption of prerelease versions in projects that use custom label filters with DataViewFilters.

[kmcfaul]

Fixed in org. It was caused by a version mismatch between DataView's internally used PF react package and the documentation framework's PF react package (so the Toolbar context/state was being lost).