PrimeNG dropdown does not select value when loaded twice in component

Question

I have a simple data model where a study has many samples. I set the p-dropdown's options, ngModel, and optionLabel during the ngOnInit method of the control:

<p-dropdown  [options]="samples" [(ngModel)]="selectedSample" optionLabel="name"></p-dropdown>

In the component's ngOnInit method, I listen for study changes and then populate the dropdown with the samples of that study. This works perfectly on the load of the page:

this.study$.subscribe((study)=>{
  this.selectedStudy = study;
  this.selectedSample = null;
  this.samples = study.samples;
  this.selectedSample = study.samples.filter(f => f.sampleId == study.selectedSample.sampleId)[0];      
  }
});

When an event is raised from another control that would change the study, I have stepped through this code and see that the samples get correctly assigned and that the selectedSample is correctly assigned as well. But the p-dropdown is still showing the first value of the dropdown and not the actual selected value.

Why doesn't primeNg's dropdown work on the second time I set the values?

What if you do `this.samples = […study.samples]`;? – Benny Halperin Aug 31 '22 at 01:29 — Benny Halperin, Aug 31 '22 at 01:29
@Benny, same thing. Doesn't select a value that is there. – Josh Aug 31 '22 at 12:57 — Josh, Aug 31 '22 at 12:57

score 0 · Accepted Answer · answered Aug 31 '22 at 12:56

I found a solution only through gaining a reference to the Dropdown control via a ViewChild call from the component.

@ViewChild('sampleDropdown') container?: Dropdown;

 <p-dropdown class="column-value"  
              [options]="samples" [(ngModel)]="selectedSample" #sampleDropdown
              (onChange)="onSampleChange($event)" 
              optionLabel="name">
            </p-dropdown>

When I would hit a breakpoint in the Observable that sets the values of the dropdown, I noticed that on the second time around, even after setting the samples property on the component, the actual control's options property was only reflecting the initial value from the first load. So I set the values manually using the following:

if (this.container){
    this.container.options = this.samples;
}

The reason for the if test is that during ngOnInit, the control hasn't been created yet. But when the observable emits, the dropdown is there.

Hopefully if anyone stumbles across PrimeNG's dropdown not selecting a value that is definitely present, this will help someone along.

score 0 · Answer 2 · answered Sep 01 '22 at 05:40

I made an app with a simple reproduction of your code and it works as expected without @ViewChild. Compare it with yours. Excuse the lame styling...

See it on Stackblitz

HTML

<h3>Samples</h3>
<p-dropdown
  [options]="samples"
  [(ngModel)]="selectedSample"
  optionLabel="name">
</p-dropdown>
<p>
<button (click)="changeSelectedSample()">Change selected sample</button>
<br/>
<button (click)="changeSelectedSampleSubject()">Change selected sample subject</button>
</p>

Class

import { Component, OnDestroy, OnInit, VERSION } from '@angular/core';
import { BehaviorSubject, interval, takeWhile, tap } from 'rxjs';

interface Sample {
  code: number;
  name?: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  samples = [
    { code: 0, name: 'sample 0' },
    { code: 1, name: 'sample 1' },
    { code: 2, name: 'sample 2' }
  ] as Sample[];
  selectedSample = null;
  selectedSample$ = new BehaviorSubject<Sample>(null);

  ngOnInit(): void {
    this.selectedSample$
    .subscribe(sample => {
      this.selectedSample = null;
      this.selectedSample = this.samples.filter(s => s.code === sample?.code)[0];
    })
  }

  changeSelectedSample(): void {
    this.selectedSample = this.selectedSample.code === 0 ? this.samples[1] : this.samples[0];
  }

  changeSelectedSampleSubject(): void {
    this.selectedSample$.next({ code: 2 });
  }
}

So I think the big difference from yours and mine is that my samples are loaded during the observable ngOnInit. Then, the selected sample is set from the study that caused the change (in my case, a change being emitted from NGXS). — Josh, Sep 01 '22 at 13:21

PrimeNG dropdown does not select value when loaded twice in component

2 Answers2