TreeTable/Tree: filtering should use content of TreeNode.data (if defined)

[nimo23]

Describe the bug

Defining a TreeNode for TreeTable (or Tree) as follows:

const userNode: TreeNode = {
    key: user.id,
    label: user.username,
    data: {
        name: (
        <div>
            <i className="pi pi-user pr-2"></i>
            <span>{user.username}</span>
        </div>
    ),
..

with column:

<Column field="name" header="" expander>

will render the Tree correctly. However, when having custom jsx in the data.name field, the TreeTable.globalFilter does not work anymore.

The filtering works when using a TreeNode without custom jsx:

const userNode: TreeNode = {
    key: user.id,
    label: user.username,
    data: {
        name: user.username,
..

Reproducer

No response

System Information

primereact 10.8.3

Steps to reproduce the behavior

1. Setup a TreeTable (or Tree) with a TreeNode like above
2. Add globalFilter to TreeTable (with state-hook) and input field:

<InputText type="search" placeholder="Search" onChange={e => setGlobalFilter(e.target.value)} />

3. Test the filter.

Expected behavior

The filtering should filter the content of TreeNode.data-fields.

[nimo23]

I also tried it by setting a custom filter (with <TreeTable filters={customFilter} ..>) to configure the global filter. But it does not work.

const customFilter: TreeTableFilterMeta = {
	  global: {
	    value: 'label', // value: 'name' does also not work
	    matchMode: FilterMatchMode.STARTS_WITH
	  }
	};

[nimo23]

Adding a non global filter does also not work:

<Column field="name" header="" filter expander>

I guess the reason filtering doesn't work in this case is that Primereact doesn't escape the HTML tags (defined as a template inside data.name) when filtering.

[melloware]

Most likely it doesn't escape them to prevent XSS.