fix(TreeTable): onFilter function to use functional updates

[KumJungMin]

Defect Fixes

• fix: TreeTable: Multiple filters set at once only keeps the last applied #7469

How To Resolve

• When the filter function is called consecutively, only the last filter is applied.
• This happens because the filter function does not reference the latest filtersState data.

const applyDoubleFilter = () => {
  ref.current.filter('applications', 'name', 'equals');
  ref.current.filter('100kb', 'size', 'equals'); // Only this one gets applied
};

• To resolve this, functional updates were applied to setFiltersState in the onFilter function, allowing it to safely reference the previous state.
• This change addressed issues caused by React's asynchronous state updates during consecutive calls. :)

Test

sample code

import { DocSectionCode } from '@/components/doc/common/docsectioncode';
import { Column } from '@/components/lib/column/Column';
import { TreeTable } from '@/components/lib/treetable/TreeTable';
import { useEffect, useState, useRef } from 'react';
import { NodeService } from '../../../service/NodeService';

export function BasicDoc(props) {
    const [nodes, setNodes] = useState([]);

    const ref = useRef();

    useEffect(() => {
        NodeService.getTreeTableNodes().then((data) => setNodes(data));
    }, []);

    const applyDoubleFilter = () => {
        ref.current.filter('applications', 'name', 'equals');
        ref.current.filter('100kb', 'size', 'equals');
    };

    return (
        <>
            <div className="card">
                <button onClick={applyDoubleFilter}>Apply Filters</button>
                <TreeTable ref={ref} globalFilter={null} value={nodes} tableStyle={{ minWidth: '50rem' }}>
                    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
                    <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
                    <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
                </TreeTable>
            </div>
            {/* <DocSectionCode code={code} service={['NodeService']} /> */}
        </>
    );
}

Before: When calling the filter function consecutively, only the last filter was applied.

2024-12-07.2.55.19.mov

After: When calling the filter function consecutively, all filters are successfully applied. :)

2024-12-07.2.55.52.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Updated (UTC)
primereact	⬜️ Ignored (Inspect)	Visit Preview	Dec 7, 2024 5:58am
primereact-v9	⬜️ Ignored (Inspect)	Visit Preview	Dec 7, 2024 5:58am