Skip to content

fix(TreeTable): avoid React warning by passing valid DOM props#7841

Merged
melloware merged 1 commit into
primefaces:masterfrom
KumJungMin:fix/issue-7833
Mar 29, 2025
Merged

fix(TreeTable): avoid React warning by passing valid DOM props#7841
melloware merged 1 commit into
primefaces:masterfrom
KumJungMin:fix/issue-7833

Conversation

@KumJungMin
Copy link
Copy Markdown
Contributor

@KumJungMin KumJungMin commented Mar 29, 2025

Defect Fixes


How To Resolve

  • The getColumnPTOptions function expects two parameters: column and key.
const getColumnPTOptions = (column, key) => {
    const cProps = getColumnProps(column);
    ...
}

  • However, the call to getColumnPTOptions for checkboxIconProps was passing only the key, resulting in incorrect behavior. The props were incorrectly populated with the entire defineProps object 😢
const checkboxIconProps = mergeProps(
    {
        className: cx('checkIcon')
    },
    getColumnPTOptions('rowCheckbox.icon') // ❌ Issue: column is missing!
);

Image: incorrect checkboxIconProps value
스크린샷 2025-03-29 오후 11 15 17


  • To fix this, I passed the missing column parameter to getColumnPTOptions.
const checkboxIconProps = mergeProps(
    {
        className: cx('checkIcon')
    },
    getColumnPTOptions(column, 'rowCheckbox.icon') // ✅ Fixed: column is passed correctly
);

Image: fixed checkboxIconProps value
스크린샷 2025-03-29 오후 11 15 05


Test

Sample Code 
import { Column } from '@/components/lib/column/Column';
import { TreeTable } from '@/components/lib/treetable/TreeTable';
import { useEffect, useState } from 'react';
import { NodeService } from '../../../service/NodeService';

export function BasicDoc() {
  const [nodes, setNodes] = useState([]);
  const [selectedNodeKeys, setSelectedNodeKeys] = useState(null);

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

  return (
      <div className="card">
          <TreeTable value={nodes} selectionMode="checkbox" selectionKeys={selectedNodeKeys} onSelectionChange={(e) => setSelectedNodeKeys(e.value)} tableStyle={{ minWidth: '50rem' }}>
              <Column field="name" header="Name" expander></Column>
              <Column field="size" header="Size"></Column>
              <Column field="type" header="Type"></Column>
          </TreeTable>
      </div>
  );
}

Before: Checking the checkbox triggers a React warning due to an invalid prop.

2025-03-29.11.20.52.mp4

After: The warning no longer appears when the checkbox is checked.

2025-03-29.11.21.27.mov

@KumJungMin KumJungMin changed the title fix(TreeTable): avoid React warning by filtering invalid DOM props fix(TreeTable): avoid React warning by passing valid DOM props Mar 29, 2025
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 29, 2025

Deployment failed with the following error:

Creating the Deployment Timed Out.

@melloware melloware merged commit d83108a into primefaces:master Mar 29, 2025
4 of 5 checks passed
@KumJungMin KumJungMin deleted the fix/issue-7833 branch March 30, 2025 06:32
@KumJungMin KumJungMin mentioned this pull request Dec 28, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@melloware melloware melloware approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Tree Table: Large number of devtools console warnings when using selectionMode="checkbox"

2 participants

@KumJungMin @melloware