Component: Dropdown

[Draganlazarev90]

Describe the bug

Having <ng-template let-item pTemplate="selectedItem">{{ item.label }}</ng-template>
throws Cannot read properties of undefined (reading 'label') error if no item is selected initially, while if you have [filter]="true" and you have a selected an item, then start typing in the filter input the selected item is not displayed

Environment

https://stackblitz.com/edit/stackblitz-starters-5fabhi

Reproducer

No response

Angular version

17.0.5

PrimeNG version

17.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10

Browser(s)

No response

Steps to reproduce the behavior

1. Open the dropdown and select an item while filtering is enabled
2. Open the dropdown and start typing something different than the selected value
3. The selectedItem value disappears

Expected behavior

No response

[rburgst]

after #14241, this is the 2nd major issue for the dropdown component. I would warn anyone from upgrading to 17, IMHO it didnt have enough time to bake.

@Draganlazarev90 note that your stackblitz is still on angular 16 and primeng 16.9.1

        "primeng": "16.9.1",

[jpgoelz]

Since 16.6.0 PrimeNG has constantly broken our builds, and we are now reluctant to even update anything.

I would advise implementing more tests for the components so they do not break on every other pull request.

[jpgoelz]

@Draganlazarev90, try surrounding the content of the template with an <ng-containger *ngIf="item"></ng-container> like this:

<ng-template let-item pTemplate="selectedItem">
  <ng-containger *ngIf="item"> {{ item.label }} </ng-container>
</ng-template>

The actual bug is that the template is used even if there is no element selected.

[KeithGillette]

I've seen multiple bugfixes for p-dropdown in recent releases but apparently none for this issue, which we are also experiencing in an Angular 17.0.8 project in attempting to update to any version of PrimeNG 17, including 17.3.1.

Adding an optional chaining operator prevents the error, but this was not required before.

<ng-template let-item pTemplate="selectedItem">{{ item?.label }}</ng-template>

[lawcha]

In my case, until version 15.4.1, when I pass the items to the p-dropdown, the first item is selected by default, which is not the case since v16. Having that error is just a side-effect of not having a default value in my opinion. Does someone knows something about that missing default value ?

[rosenthalj]

This issue is really two bugs :

1. Having {{ item.label }}
   throws Cannot read properties of undefined (reading 'label') error if no item is selected initially
2. if you have [filter]="true" and you have a selected an item, then start typing in the filter input the selected item is not displayed
   (Note: these descriptions were taken directly from this "Describe the bug" section at the top of this issue)

After examining the changes in pull request #14643, it appears that only the first bug of this issue is fixed by pull request #14643. The "very simple demo" reproducer provided in the pull request only addresses the first part of this issue

The second bug of this issue is related to issue #14596. The pull request #14665 fixes issue #14596 and also fixes the second bug of this issue.

The first video listed below is running this issues original reproducer(https://stackblitz.com/edit/stackblitz-starters-5fabhi) and "only" demonstrates the second bug of the issues.

DropdownFilterWithTemplateBug.mov

The second video listed below is with the changes from pull request #14665 and shows bug 2 of this issue has been fixed

DropdownFilterWithTemplateFix.mov