dropdown not selected After upgrade Primeng 16

[ashikjs]

Describe the bug

Dorpdown component value or name if we change then it's not working properly. I's not working reactive form and ngModel both.

Just add those to your drop-down option component :

 optionLabel="name"
 optionValue="code"

Example: 1. https://stackblitz.com/edit/qxhoel?file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.html,src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.ts

2. https://stackblitz.com/edit/xjmp6v?file=src%2Fapp%2Fdemo%2Fdropdown-basic-demo.html,src%2Fapp%2Fdemo%2Fdropdown-basic-demo.ts

Reproducer

https://stackblitz.com/edit/qxhoel?file=src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.html,src%2Fapp%2Fdemo%2Fdropdown-reactive-forms-demo.ts

Angular version

16

PrimeNG version

16.7.2

Expected behavior

it should show selected options as it is.

[cetincakiroglu]

Hi,

With version 16.7.0, we have released the first part of the accessibility implementation for inputs that we have been working on for a long time. Based on the research we conducted during the implementation, we decided that many components needed changes in their structure and simplification, and these components were rewritten. Unfortunately, after extensive testing, there may be unexpected and unforeseen bugs that have emerged. We are grateful for your reports, and we are working to address them in the upcoming releases!

[ashikjs]

@cetincakiroglu Thanks for update, hope it will solved soon.

[scurk1415]

This also happens when using pTemplate

So this does not work, because the let-item value coresponds to the item optionValue, instead of the whole option

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

So if we have an item like this

{
    label: 'Test',
    value: 1
}

The let-item will be 1 (the value) instead of the whole selected item. Which throws an error

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

This doesn't throw an error, but it also not the desired behavior.
The problem is that i want to display the label of the selected item instead of the value.

[cetincakiroglu]

@scurk1415

Behavior is the same as before the accessibility for the templating, please do not provide optionValue if you're provided optionLabel with templating. So in this case, please use it by considering our templating demos. Also, we're currently fixing dropdown bugs, please share a stackblitz reproducer of your issue too so we can check if we covered as many issues as we can.

[cetincakiroglu]

Hi @ashikjs,

I've just pushed a commit to fix the issues you mentioned, the issue was caused by misinformation in the documentation as well and we found that label and model update logic is malfunctioning.

When using optionValue="code", the component returns the value of the option as a string format. This change was not made during the accessibility update, it existed in previous versions and it's by design. So don't expect object when using optionValue input.

For example:

            <form [formGroup]="formGroup">
                <p-dropdown formControlName="selectedCity" [options]="cities" optionLabel="name" optionValue="code" placeholder="Select a City"></p-dropdown>
            </form>

    cities: City[] | undefined;
    
    formGroup: FormGroup | undefined;

    ngOnInit() {
        this.cities = [
            { name: 'New York', code: 'NY' },
            { name: 'Rome', code: 'RM' },
            { name: 'London', code: 'LDN' },
            { name: 'Istanbul', code: 'IST' },
            { name: 'Paris', code: 'PRS' }
        ];

        this.formGroup = new FormGroup({
            selectedCity: new FormControl<City | null>('PRS');
        });
    }

As in the example, the option value will be 'PRS' for { name: 'Paris', code: 'PRS' }

Thanks for reporting the issue!

[djay1977]

Not working after PrimeNG 16.8.0 update.

• With template, the value is not selected with optionValue.
• Without template with SelectItem, value null is not selected. I have in my array a SelecItem like {label: 'Choose', value: null}.

=> These behaviors work in PrimeNG 16.6.0 and before

[neddyKG]

Not working on the dropdown with filter. When I select an option the dropdown turns blank. If I remove optionValue it works normal, but I need the value to save to database.

<p-dropdown
              class="md:w-20rem w-full dropdown"
              [options]="diagnosisList"
              [(ngModel)]="diagnosis"
              formControlName="diagnosis"
              optionLabel="name"
              optionValue="value"
              [filter]="true"
              filterBy="name"
              [showClear]="true"
              placeholder="Seleccione el diagnostico">
              <ng-template pTemplate="selectedItem">
                <div class="flex align-items-center gap-2" *ngIf="diagnosis">
                  <div>{{ diagnosis.name }}</div>
                </div>
              </ng-template>
              <ng-template let-diagnosis pTemplate="item">
                <div class="flex align-items-center gap-2">
                  <div>{{ diagnosis.name }}</div>
                </div>
              </ng-template>
            </p-dropdown>

[rbarbeito]

Hi
I use the "primeng" version: "17.18.0", and in p-dropdown when I select an item from the list it does not update,
I have noticed that if I use the property [editable]='true" then it does work, only that it allows the user to enter data

<p-dropdown
[options]="data"
placeholder="Seleccionar nombre"
optionLabel="label"
optionValue="value"
[filter]="true"
filterBy="label, value"
[resetFilterOnHide]="true"
[style]="{ width: '100%' }"
[showClear]="true"
(onChange)="emitValor($event)"
appendTo="body"
[editable]="true" 
></p-dropdown>

data=[
{value= 'cod1', label: 'user1'},
{value= 'cod2', label: 'user2'}
]

[pradnya-khairnar]

I also faced same issue @rbarbeito , did you find any other solution apart from editable which would work as expected.

[guedru]

I had the same issue, and the bug appears when I initialize my options at the declaration.
For example :

export class MyComponent implements OnInit {

  constructor(){}

  myOptions: {code: number, name: string}[] = [];
...
}

make the bug append
but :

export class MyComponent implements OnInit {

  constructor(){}

  myOptions!: {code: number, name: string}[];
...
}

And the selected item is displayed.

[rbarbeito]

@guedru I have reviewed my code after your suggestion and it works correctly, thanks for the contribution.

[pradnya-khairnar]

@guedru also worked for me, thanks you suggestion.