diff --git a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx
index c4d02c4a..e386b235 100644
--- a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx
+++ b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
import DataViewCheckboxFilter, { DataViewCheckboxFilterProps } from './DataViewCheckboxFilter';
import DataViewToolbar from '../DataViewToolbar';
import '@testing-library/jest-dom';
@@ -29,4 +29,17 @@ describe('DataViewCheckboxFilter component', () => {
expect(screen.getByText('Short name')).toBeInTheDocument();
expect(screen.getByText('Test Checkbox Filter')).toBeInTheDocument();
});
+
+ it('clears all selected chips via the category group delete button (#646)', () => {
+ const onChange = jest.fn();
+ const { container } = render(
+ }
+ />
+ );
+ const groupClose = container.querySelector('.pf-v6-c-label-group__close button');
+ expect(groupClose).toBeInTheDocument();
+ fireEvent.click(groupClose as HTMLElement);
+ expect(onChange).toHaveBeenCalledWith(undefined, []);
+ });
});
diff --git a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx
index 0e1eff0f..12902d41 100644
--- a/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx
+++ b/packages/module/src/DataViewCheckboxFilter/DataViewCheckboxFilter.tsx
@@ -124,6 +124,7 @@ export const DataViewCheckboxFilter: FC = ({
deleteLabel={(_, label) =>
onChange?.(undefined, value.filter(item => item !== (isToolbarLabel(label) ? label.key : label)))
}
+ deleteLabelGroup={() => onChange?.(undefined, [])}
categoryName={categoryName}
showToolbarItem={showToolbarItem}
>
diff --git a/packages/module/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap b/packages/module/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap
index 344683fe..11478d18 100644
--- a/packages/module/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap
+++ b/packages/module/src/DataViewCheckboxFilter/__snapshots__/DataViewCheckboxFilter.test.tsx.snap
@@ -165,6 +165,38 @@ exports[`DataViewCheckboxFilter component should render correctly 1`] = `
+
diff --git a/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx b/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx
index 85c8f193..33090457 100644
--- a/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx
+++ b/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter';
import DataViewToolbar from '../DataViewToolbar';
@@ -32,6 +32,19 @@ describe('DataViewTextFilter component', () => {
expect(screen.getByPlaceholderText('Filter by Test Filter')).toBeInTheDocument();
});
+ it('clears the value via the category group delete button (#646)', () => {
+ const onChange = jest.fn();
+ const { container } = render(
+ }
+ />);
+ const groupClose = container.querySelector('.pf-v6-c-label-group__close button');
+ expect(groupClose).toBeInTheDocument();
+ fireEvent.click(groupClose as HTMLElement);
+ expect(onChange).toHaveBeenCalledWith(undefined, '');
+ });
+
it('should focus the search input when "/" key is pressed and filter is visible', () => {
render( = ({
data-ouia-component-id={ouiaId}
labels={value.length > 0 ? [ { key: categoryName, node: value } ] : []}
deleteLabel={() => onChange?.(undefined, '')}
+ deleteLabelGroup={() => onChange?.(undefined, '')}
categoryName={categoryName}
showToolbarItem={showToolbarItem}
>
diff --git a/packages/module/src/DataViewTextFilter/__snapshots__/DataViewTextFilter.test.tsx.snap b/packages/module/src/DataViewTextFilter/__snapshots__/DataViewTextFilter.test.tsx.snap
index 78f03d3b..e5f1cf53 100644
--- a/packages/module/src/DataViewTextFilter/__snapshots__/DataViewTextFilter.test.tsx.snap
+++ b/packages/module/src/DataViewTextFilter/__snapshots__/DataViewTextFilter.test.tsx.snap
@@ -170,6 +170,38 @@ exports[`DataViewTextFilter component should render correctly 1`] = `
+