P-Tree: Duplicated render

[jiyeol-lee]

Describe the bug

In the primeng document page example, https://stackblitz.com/edit/primeng-tree-demo?file=src%2Fapp%2Fapp.component.ts, I upgrade primeng to 14.0.0-rc.1 and change expanded property to true and it renders unexpected children.

import {Component,OnInit} from '@angular/core';
import {NodeService} from './nodeservice';
import {TreeNode} from 'primeng/api';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 
    files1: TreeNode[];
    
    files2: TreeNode[];
    
    constructor(private nodeService: NodeService) { }

    ngOnInit() {
        this.nodeService.getFiles().then(files => {
            // If you pass expanded: true in here,
            // children are duplicated
            this.files1 = [{ ...files[0], expanded: true }]
        });
        this.nodeService.getFiles().then(files => this.files2 = files);
    }
    
    expandAll(){
        this.files2.forEach( node => {
            this.expandRecursive(node, true);
        } );
    }

    collapseAll(){
        this.files2.forEach( node => {
            this.expandRecursive(node, false);
        } );
    }
    
    private expandRecursive(node:TreeNode, isExpand:boolean){
        node.expanded = isExpand;
        if (node.children){
            node.children.forEach( childNode => {
                this.expandRecursive(childNode, isExpand);
            } );
        }
    }
}

Environment

I test it on https://stackblitz.com/edit/primeng-tree-demo?file=src%2Fapp%2Fapp.component.ts which is from primeng documentation website (https://primefaces.org/primeng/tree)

Reproducer

No response

Angular version

14.0.3

PrimeNG version

14.0.0-rc.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.4.2

Browser(s)

Chrome 103.0.5060.53

Steps to reproduce the behavior

1. Go to https://stackblitz.com/edit/primeng-tree-demo?file=src%2Fapp%2Fapp.component.ts
2. Upgrade primeng to 14.0.0-rc.1
3. Copy and paste the following code to app.component.ts

import {Component,OnInit} from '@angular/core';
import {NodeService} from './nodeservice';
import {TreeNode} from 'primeng/api';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 
    files1: TreeNode[];
    
    files2: TreeNode[];
    
    constructor(private nodeService: NodeService) { }

    ngOnInit() {
        this.nodeService.getFiles().then(files => {
            // If you pass expanded: true in here,
            // children are duplicated
            this.files1 = [{ ...files[0], expanded: true }]
        });
        this.nodeService.getFiles().then(files => this.files2 = files);
    }
    
    expandAll(){
        this.files2.forEach( node => {
            this.expandRecursive(node, true);
        } );
    }

    collapseAll(){
        this.files2.forEach( node => {
            this.expandRecursive(node, false);
        } );
    }
    
    private expandRecursive(node:TreeNode, isExpand:boolean){
        node.expanded = isExpand;
        if (node.children){
            node.children.forEach( childNode => {
                this.expandRecursive(childNode, isExpand);
            } );
        }
    }
}

Expected behavior

It should render as the input value, not duplicated children