dpdragnev
dpdragnev

Reputation: 2111

PrimeNG's multiselect is throwing an error when used with input signals

I have a Angular 18.1 application in which I am using PrimeNg 17.18.5 (which according to their documentation should be compatible with ng 18). In this application, I have a multiselect bound to an input signal initialized with []. The error I am getting is:

TypeError: visibleOptions.filter is not a function
    at EffectHandle.effectFn (primeng-multiselect.mjs:864:59)

Drilling down into PrimeNg's code, I found the error in the line marked with >>>:

constructor(el, renderer, cd, zone, filterService, config, overlayService) {
        this.el = el;
        this.renderer = renderer;
        this.cd = cd;
        this.zone = zone;
        this.filterService = filterService;
        this.config = config;
        this.overlayService = overlayService;
        effect(() => {
            const modelValue = this.modelValue();
            const visibleOptions = this.visibleOptions();
            if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) {
                if (this.optionValue && this.optionLabel && modelValue) {
                    >>> this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
                }
                else {
                    this.selectedOptions = modelValue;
                }
                this.cd.markForCheck();
            }
        });
    }

When I breakpointed the app there, it seems that the visibleOptions, which should a simple list of objects, for some reason converts into an actual signal, hence the error.

Here is my component's markup:

<div class="field">
     <label class="input-label">Name *</label>
     <p-multiSelect [options]="tables()" [(ngModel)]="selectedTables" appendTo="body" optionValue="tableId" optionLabel="name" panelStyleClass="widthOverride"></p-multiSelect>
</div>

and the component class:

...
@Component({
    selector: 'app-edit-table',
    templateUrl: './edit-table.component.html',
    styleUrls: ['./edit-table.component.css'],
    standalone: true,
    imports: [...]
})
export class EditTableComponent implements OnInit {

tables = input<TablesModel[]>([]);
selectedTables = signal<TablesModel[]>([]);

...
the rest of the code
...
}

The tables input is provided by the parent component. There is a lot of code in both components. I have only included the code I think is relevant, let me know if you need more info.

Any idea on how to fix that error?

Upvotes: 1

Views: 245

Answers (0)

Related Questions