Major bug p-dropdown in latest LTS version!

[guido8686]

Describe the bug

We recently purchased the LTS license for v16.x. But unfortunately we cannot use it in our project because there seems to be an issue with some components. The p-dropdown for example is causing errors, while in previous version of PrimeNG it was working as expected.

It looks like things broke since version 16.7.0.
See:
f52340b#diff-6c150dd52985058b500004b45dc02ee3d7bf072068491df756a829825f17dc4c

Environment

Windows and Unix

Reproducer

No response

Angular version

16.2.12

PrimeNG version

16.9.6-lts

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.2

Browser(s)

No response

Steps to reproduce the behavior

<p-dropdown [(ngModel)]="selectedOption"
            [options]="options"
            optionLabel="name"
            placeholder="Select" appendTo="body">

  <ng-template let-itm pTemplate="selectedItem">
    <div style="display: grid; grid-template-columns: auto 20% 20%;">
      <span style="text-align: left">{{itm.name}}</span>
    </div>
  </ng-template>
  <ng-template let-itm pTemplate="item">
    <div style="display: grid; grid-template-columns: auto 20% 20%;">
      <span style="text-align: left">{{itm.name}}</span>
    </div>
  </ng-template>
</p-dropdown>

Expected behavior

There seems to be an issue with p-dropdown in combination with pTemplate.
It is throwing errors saying: cannot read properties of undefined reading name.

[roman-bychkov]

I have the same error, looks like a regression

[basvandenberg]

Considering the size of that diff, the ammount of issues I experienced with p-dropdown since, and the ammount of dropdown issues reported here, I am fairly sure that this is not the only regression.

The mentioned commit also introduces the use of signals, including the effect function, which is still in developer preview (https://angular.io/guide/signals#effects). I don't understand how that can end up in an LTS version.

[guido8686]

I agree with @basvandenberg

Please can you provide a solution for this ASAP

[cetincakiroglu]

Hi @guido8686,

Could you please share a stackblitz example so we can identify the issue?

[guido8686]

@cetincakiroglu

See: https://stackblitz.com/edit/png15026

[dalenguyen]

I think your template has some issue. It should be something like this:

You should check if selectedCountry exists or not before getting the value of desc.

<div class="card flex justify-content-center">
    <p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="desc" placeholder="Select a Country">
        <ng-template pTemplate="selectedItem">
            <div class="flex align-items-center gap-2" *ngIf="selectedCountry">
                <div>{{ selectedCountry.desc }}</div>
            </div>
        </ng-template>

        <ng-template let-itm pTemplate="item">
            <div class="flex align-items-center gap-2">
                <div>{{ itm.desc }}</div>
            </div>
        </ng-template>
    </p-dropdown>
</div>

If you don't want to use ngIf, you can use optional:

        <div class="flex align-items-center gap-2">
                <div>{{ selectedCountry?.desc }}</div>
         </div>

You can copy and paste to your stackblitz.

[basvandenberg]

The selected option is provided as context in the selectedItem template, so using let-itm should be fine. I assume that the issue can also be fixed adding an *ngIf to check if itm (the one in the selectedItem template) is defined.

However, didn't @guido8686 mention that this used to work before 16.7.0? It would also make sense that the selected option is provided as context variable, and that this is context variable is never undefined. It shouldn't be necessary to check if there is a selected option, because the template will only be rendered if there is a selected option, right?

[guido8686]

Indeed like @basvandenberg mentioned, the *ngIf should not be necessary, and this was not necessary before 16.7.0

With other words, all previous projects using templates in dropdowns will break when upgrading because the *ngIf was not needed before.

Adding the *ngIf on the template could be a possible workaround.

A possible solution could be to check if the value is present in the template component itself.

[cetincakiroglu]

Hi,

Thanks a lot for reporting the example, this works with the latest version (v17.11.0), we'll port the fixes in the upcoming LTS release next week.

in v17.11.0: https://stackblitz.com/edit/yrqm6q?file=src%2Fapp%2Fdemo%2Fdropdown-template-demo.ts,src%2Fapp%2Fdemo%2Fdropdown-template-demo.html

[cetincakiroglu]

Hi @guido8686,

lts version 16.9.7 is released now. You can download and use it.
Closing the issue, thanks for reporting!