PrimeNG dropdown needs doubleclick when using a function for options

Question

I am using the PrimeNG dropdown with the PrimeNG turbo table. I have column that uses the dropdown in edit mode where I need the options to be filtered based on the value of another column. Then I have the issue described here.

I can't really find a good way to use lists for the options instead of a method as that would require me to maintain a list of options for each of the rows in the table.

1. Does anyone know how to fix the issue ?
2. Can someone suggest a better way of getting the options where I don't face this problem ?

Answer 1

I updated you code as below, and it works.

Chnages in OnInit

 ngOnInit() {
    this.cols = [
      { field: 'vin', header: 'Vin' },
      { field: 'year', header: 'Year' }
    ];
    this.cars.push(
      { val1: { 'id': 1, 'value': '1' }, val2: { 'id': 7, 'value': '7' } });

this.options1.push({ 'id': 1, 'value': '1' });
this.options1.push({ 'id': 2, 'value': '2' });
this.options1.push({ 'id': 3, 'value': '3' });


this.options2.push({ 'id': 7, 'value': '7' });
this.options2.push({ 'id': 8, 'value': '8' });
  }

Changes in Html

<p-dropdown [options]="options2" [(ngModel)]="rowData.val2"  optionLabel="value" dataKey="id"></p-dropdown>

Answer 2

I spent probably 2.5 hours on this issue... I was almost banging my head against the wall! :D

Checked another angular component on the project at hand where the dropdown was working correctly and indeed the difference was the [options] property that was being assigned directly from a var within the component itself. On this one having the issue the [options] were being dynamically created with a function and I was facing that double click issue. This was breaking the (onChange) event which was not being fired and hence ruined the expected functionality.

So I got here in this question I think from this issue on Prime-NG GitHub repo. This fortunately made me understand what was the issue.

Searched a bit more using different terms and found this answer here on SO and just adapted it to be used with p-dropdown like this:

UI side:

<p-dropdown [options]="dynamicOptions"
            appendTo="body"
            optionLabel="label"
            (onChange)="optionChanged(report)"                                          
            (onShow)="getDynamicOptions(report)">

The trick here is to use the (onShow) event to build the dynamic options.

Component side:

export class MyComponent {
    dynamicOptions: OptionItem[];  
               
    getDynamicOptions(report: Report) {
        //debugger;

        let dynamicOptions: OptionItem[] = [
            {
                label: 'No Action',
                value: 'no-action'
            }
        ];

        // your logic here to build dynamic options...

        this.dynamicOptions = dynamicOptions;
    }
}