diff --git a/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx b/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx
index 66850084..85c8f193 100644
--- a/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx
+++ b/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter';
import DataViewToolbar from '../DataViewToolbar';
@@ -22,6 +22,16 @@ describe('DataViewTextFilter component', () => {
expect(container).toMatchSnapshot();
});
+ it('should use chipTitle for the filter chip category when provided', () => {
+ render(
+ }
+ />);
+ expect(screen.getByText('Short name')).toBeInTheDocument();
+ expect(screen.getByPlaceholderText('Filter by Test Filter')).toBeInTheDocument();
+ });
+
it('should focus the search input when "/" key is pressed and filter is visible', () => {
render( | undefined, value: string) => void;
/** Controls visibility of the filter in the toolbar */
@@ -24,6 +26,7 @@ export interface DataViewTextFilterProps extends SearchInputProps {
export const DataViewTextFilter: FC = ({
filterId,
title,
+ chipTitle,
value = '',
onChange,
onClear = () => onChange?.(undefined, ''),
@@ -33,6 +36,8 @@ export const DataViewTextFilter: FC = ({
enableShortcut = true,
...props
}: DataViewTextFilterProps) => {
+ const categoryName = chipTitle ?? title;
+
useEffect(() => {
if (!enableShortcut) {
return;
@@ -68,9 +73,9 @@ export const DataViewTextFilter: FC = ({
0 ? [ { key: title, node: value } ] : []}
+ labels={value.length > 0 ? [ { key: categoryName, node: value } ] : []}
deleteLabel={() => onChange?.(undefined, '')}
- categoryName={title}
+ categoryName={categoryName}
showToolbarItem={showToolbarItem}
>