primefaces / primefaces/primereact

OrganizationChart: duplicate child nodes when parent has more than 10 children

Open
#8,540 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Needs Triage
Dominant language
CSS
Stars
8.3k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

When an OrganizationChart node has more than MAX_CHILDREN_PER_ROW (10) children, child nodes are rendered multiple times. createChildrenSection() correctly chunks children into rows, but createLinesDown(), createLinesMiddle(), and createChildNodes() each re-chunk all children and render every row on each iteration instead of only the current row slice. For example, 16 children produce two chunks and the full subtree is duplicated (each child appears twice).

Reproducer

https://stackblitz.com/edit/vitejs-vite-pekean1c

System Information
System:
    OS: Windows 11 10.0.26200
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1145G7 @ 2.60GHz
    Memory: 1.79 GB / 15.71 GB
  Binaries:
    Node: 22.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Users\LENOVO\AppData\Roaming\npm\yarn.CMD
    npm: 11.5.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 148.0.7778.179
    Edge: Chromium (140.0.3485.54)
    Internet Explorer: 11.0.26100.8115
Steps to reproduce the behavior

Steps to reproduce

  1. Render OrganizationChart with data where one node has 11 or more children.
  2. Ensure that node is expanded.
  3. Inspect the chart or DOM.
Expected behavior

Expected behavior

Each child appears exactly once, split across rows of at most 10 children per row.

Actual behavior

Children are duplicated once per chunk (e.g. 11–20 children → 2× duplication).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with OrganizationChart's createChildrenSection(), createLinesDown(), createLinesMiddle(), and createChildNodes() methods, using the StackBlitz reproducer with 11 or more children. Trace how each method handles the current child-row slice rather than all chunks. Done means every child renders exactly once, rows contain at most 10 children, and the expanded chart no longer duplicates subtrees.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.