feat(defaultActive): set correct filter after clicking on clear

Author: karelhala

cypress/component/DataViewFilters.cy.tsx

@@ -98,7 +98,7 @@ describe('DataViewFilters', () => {
     cy.get('[aria-label="Close Main branch"]').should('have.length', 0);
   });
 
-  it('clears all filters using the clear-all button', () => {
+  it('clears all filters using the clear-all button and resets attribute to first', () => {
     cy.mount(<DataViewToolbarWithState />);
     cy.get('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle').click();
     cy.contains('Name').click();
@@ -108,6 +108,8 @@ describe('DataViewFilters', () => {
     cy.contains('Branch').click();
     cy.get('input[placeholder="Filter by branch"]').type('Main branch');
 
+    cy.get('[data-ouia-component-id="DataViewFilters"]').should('contain.text', 'Branch');
     cy.get('[data-ouia-component-id="FiltersExampleHeader-clear-all-filters"]').should('exist').click();
+    cy.get('[data-ouia-component-id="DataViewFilters"]').should('contain.text', 'Name');
   });
 });

packages/module/src/DataViewFilters/DataViewFilters.test.tsx

@@ -37,4 +37,78 @@ describe('DataViewFilters component', () => {
     fireEvent.input(input, { target: { value: 'abc' } });
     expect(mockOnChange).toHaveBeenCalledWith('one', { one: 'abc' });
   });
+
+  it('should use defaultActiveFilter as initial active filter', () => {
+    const { container } = render(
+      <DataViewToolbar
+        filters={
+          <DataViewFilters onChange={mockOnChange} values={{ one: '', two: '' }} defaultActiveFilter="two">
+            <DataViewTextFilter filterId="one" title="One" />
+            <DataViewTextFilter filterId="two" title="Two" />
+          </DataViewFilters>
+        }
+      />
+    );
+
+    const toggle = container.querySelector('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle') as HTMLButtonElement;
+    expect(toggle.textContent).toContain('Two');
+  });
+
+  it('should reset active filter to defaultActiveFilter when all values are cleared', () => {
+    const { container, rerender } = render(
+      <DataViewToolbar
+        filters={
+          <DataViewFilters onChange={mockOnChange} values={{ one: 'test', two: '' }} defaultActiveFilter="two">
+            <DataViewTextFilter filterId="one" title="One" />
+            <DataViewTextFilter filterId="two" title="Two" />
+          </DataViewFilters>
+        }
+      />
+    );
+
+    const toggle = container.querySelector('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle') as HTMLButtonElement;
+    expect(toggle.textContent).toContain('Two');
+
+    rerender(
+      <DataViewToolbar
+        filters={
+          <DataViewFilters onChange={mockOnChange} values={{ one: '', two: '' }} defaultActiveFilter="two">
+            <DataViewTextFilter filterId="one" title="One" />
+            <DataViewTextFilter filterId="two" title="Two" />
+          </DataViewFilters>
+        }
+      />
+    );
+
+    expect(toggle.textContent).toContain('Two');
+  });
+
+  it('should reset active filter to first item when all values are cleared without defaultActiveFilter', () => {
+    const { container, rerender } = render(
+      <DataViewToolbar
+        filters={
+          <DataViewFilters onChange={mockOnChange} values={{ one: 'test', two: '' }}>
+            <DataViewTextFilter filterId="one" title="One" />
+            <DataViewTextFilter filterId="two" title="Two" />
+          </DataViewFilters>
+        }
+      />
+    );
+
+    const toggle = container.querySelector('[data-ouia-component-id="DataViewFilters"] .pf-v6-c-menu-toggle') as HTMLButtonElement;
+    expect(toggle.textContent).toContain('One');
+
+    rerender(
+      <DataViewToolbar
+        filters={
+          <DataViewFilters onChange={mockOnChange} values={{ one: '', two: '' }}>
+            <DataViewTextFilter filterId="one" title="One" />
+            <DataViewTextFilter filterId="two" title="Two" />
+          </DataViewFilters>
+        }
+      />
+    );
+
+    expect(toggle.textContent).toContain('One');
+  });
 });

packages/module/src/DataViewFilters/DataViewFilters.tsx

@@ -1,4 +1,4 @@
-import { Children, isValidElement, cloneElement, useMemo, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
+import { Children, isValidElement, cloneElement, useMemo, useCallback, useState, useRef, useEffect, ReactElement, ReactNode } from 'react';
 import {
   Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper, ToolbarGroup, ToolbarToggleGroup, ToolbarToggleGroupProps,
 } from '@patternfly/react-core';
@@ -31,6 +31,8 @@ export interface DataViewFiltersProps<T extends object> extends Omit<ToolbarTogg
   breakpoint?: ToolbarToggleGroupProps['breakpoint'];
   /** Custom OUIA ID */
   ouiaId?: string;
+  /** Optional filterId to use as the default active filter. Falls back to the first filter when not specified. The active filter resets to this value when all filter values are cleared. */
+  defaultActiveFilter?: string;
 };
 
 
@@ -41,6 +43,7 @@ export const DataViewFilters = <T extends object>({
   breakpoint = 'xl',
   onChange,
   values,
+  defaultActiveFilter,
   ...props
 }: DataViewFiltersProps<T>) => {
   const [ activeAttributeMenu, setActiveAttributeMenu ] = useState<string>('');
@@ -60,9 +63,25 @@ export const DataViewFilters = <T extends object>({
       isValidElement(child) ? { filterId: String((child.props as any).filterId), title: String((child.props as any).title) } : undefined
     ).filter((item): item is DataViewFilterIdentifiers => !!item), [ childrenHash ]);  // eslint-disable-line react-hooks/exhaustive-deps
 
+  const getDefaultTitle = useCallback(() => {
+    if (defaultActiveFilter) {
+      const match = filterItems.find(item => item.filterId === defaultActiveFilter);
+      if (match) {
+        return match.title;
+      }
+    }
+    return filterItems.length > 0 ? filterItems[0].title : '';
+  }, [ defaultActiveFilter, filterItems ]);
+
+  useEffect(() => {
+    setActiveAttributeMenu(getDefaultTitle());
+  }, [ filterItems, getDefaultTitle ]);
+
   useEffect(() => {
-    filterItems.length > 0 && setActiveAttributeMenu(filterItems[0].title);
-  }, [ filterItems ]);
+    if (values && Object.values(values).every(v => v === '' || v === undefined || (Array.isArray(v) && v.length === 0))) {
+      setActiveAttributeMenu(getDefaultTitle());
+    }
+  }, [ values, getDefaultTitle ]);
 
   const handleClickOutside = (event: MouseEvent) => 
     isAttributeMenuOpen &&