Add Dropdown Option on Opening a Grouped Dropdown

[monsterrave]

Describe the bug

When the user opens the dropdown list, I want to add an dropdown item.

This is no problem in an ungrouped dropdown, but when I set [group]="true" this does not seem to work any longer...

Environment

"dependencies": {
    "primeng": "17.3.3",
    "@angular-devkit/build-angular": "^17.3.6",
    "@angular/animations": "^17.3.6",
    "@angular/cdk": "^17.3.6",
    "@angular/cli": "^17.3.6",
    "@angular/common": "^17.3.6",
    "@angular/compiler": "^17.3.6",
    "@angular/compiler-cli": "^17.3.6",
    "@angular/core": "^17.3.6",
    "@angular/forms": "^17.3.6",
    "@angular/platform-browser": "^17.3.6",
    "@angular/platform-browser-dynamic": "^17.3.6",
    "@angular/platform-server": "^17.3.6",
    "@angular/router": "^17.3.6",
    "chart.js": "3.3.2",
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "quill": "1.3.7",
    "rxjs": "~7.8.1",
    "tslib": "^2.5.0",
    "zone.js": "~0.14.0",
    "typescript": "~5.4.5",
    "lodash": "^4.17.21"
  }

Reproducer

https://stackblitz.com/edit/btpn8a-fttwuo?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Faddoption.directive.ts,src%2Fapp%2Fdemo%2Fdropdown-demo.ts,src%2Findex.html,src%2Fapp%2Fdemo%2Fdropdown-demo.html,src%2Fkarma.conf.js,package.json

Angular version

17.3.6

PrimeNG version

17.3.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.20.3

Browser(s)

No response

Steps to reproduce the behavior

1. click to open ungrouped dropdown -> should add dropdown option to list

2. set dropdown [group]="true"

3. click to open grouped dropdown -> no option added

Expected behavior

should have same behaviour both in grouped and ungrouped dropdowns

[mjlux]

The setup of adding an option in your example directive modifies the options array by unshifting a new item onto it. This may not trigger an angular update. If you instead provide a new array it works as expected.

this.dropdown.options = [
    {
        label: 'root ' + this.dropdown.options.length,
        items: [
            { label: 'child ' + this.dropdown.options.length, value: 'None' },
        ],
    },
    ...this.dropdown.options,
];