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`] = ` +
+ +