p-dropdown: Selected value is changed properly, but colors are not updated in the following example

[AIO1]

Describe the bug

Given the following TypeScript code:

  dropdown_energyEfficiency: IEnergyEfficiency[] = [];
  dropdown_SelectedEnergyEfficiency: IEnergyEfficiency | null = null;

interface IEnergyEfficiency {
  id: string;
  energyLetter: string;
  colorR: number;
  colorG: number;
  colorB: number;
}

And given the following HTML code:

                                <div class="flex-grow-1">
                                    <div class="flex flex-column gap-2">
                                        <label for="squareMeter" style="font-weight: bold;">Eficiencia energética</label>
                                        <p-dropdown appendTo="body" [showClear]="true" [style]="{'width': '100%'}" [options]="dropdown_energyEfficiency" [(ngModel)]="dropdown_SelectedEnergyEfficiency" placeholder="Selecciona una eficiencia energética">
                                            <ng-template pTemplate="selectedItem">
                                                <div *ngIf="dropdown_SelectedEnergyEfficiency">
                                                    <p-tag [style]="{ 'background': 'rgb(' + dropdown_SelectedEnergyEfficiency.colorR + ',' + dropdown_SelectedEnergyEfficiency.colorG + ',' + dropdown_SelectedEnergyEfficiency.colorB + ')'}">
                                                        <div class="flex align-items-center gap-2">
                                                            <span class="text-base">{{ dropdown_SelectedEnergyEfficiency.energyLetter }}</span>
                                                        </div>
                                                    </p-tag>
                                                </div>
                                            </ng-template>
                                            <ng-template let-curItem pTemplate="item">
                                                <div class="flex align-items-center gap-2">
                                                    <p-tag [style]="{ 'background': 'rgb(' + curItem.colorR + ',' + curItem.colorG + ',' + curItem.colorB + ')'}">
                                                        <div class="flex align-items-center gap-2">
                                                            <span class="text-base">{{ curItem.energyLetter }}</span>
                                                        </div>
                                                    </p-tag>
                                                </div>
                                            </ng-template>
                                        </p-dropdown>
                                    </div>
                                </div>

Fllow these steps in order to reproduce the error:

1. Open the dropdown to view the options available:
   

2. Select one option, for example "G". It works as intended.
   

3. Pick now letter "A" and see that the color is not updated.
   

4. Click on the dropdown "X" icon and select again letter "A", now it works.
   

The tag will be properly updated in frist select, but subsequent selects (unless dropdown is set to null) won't update the color of the tag.

Environment

Development

Reproducer

No response

Angular version

17

PrimeNG version

17.3.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.10.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[AIO1]

It's still active.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!