Table filter set undefined

[certifirm]

Describe the bug

I am using table component with this filter box:

 <th>
          <input pInputText style="width: 100%;"
            (input)="employeesList.filter($event.target['value'], column.field, 'contains')"
            [value]="employeesList.filters[column.field]?.['value']">
 </th>

Using PrimeNG 17.3.0 all works well. With 17.3.1 and up, sets undefined in the inputbox when you write a character in it.

Environment

Angular 17
Prime 17.3.3

Reproducer

No response

Angular version

17

PrimeNG version

17.3.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v18.18.2

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Work like in 17.3.0

[Da13Harris]

We are also encountering this bug in the latest release (17.4.0). It works in our previous version (16.0.2) of PrimeNG.

When typing anything into the filter, the word "undefined" appears in the text box. This issue appears to have been introduced by #14433, which fixed #14432, because the individual custom filters are now being nested inside an array. Unfortunately, this is a breaking change in a minor release.

Here's an example snippet of our code that has this issue:

<input
  id="network-name-filter"
  type="text"
  (input)="utilitiesService.tableFilter(tableRef, 'networkName', $event)"
  [value]="utilitiesService.castFilterAsMetadata(tableRef.filters['networkName'])?.value"
  placeholder="Filter Network Name"
/>

The utilitiesService.tableFilter() is a wrapper function that calls tableRef.filter(target.value, propertyName, matchMode), just like @certifirm's issue.

tableFilter(
  tableRef: Table,
  propertyName: string,
  event: Event,
  matchMode: string = FilterMatchMode.CONTAINS
) {
  const target =
    event.target instanceof HTMLInputElement
      ? event.target
      : (event.target as HTMLSelectElement);

  tableRef.filter(target.value, propertyName, matchMode as string);
}

The castFilterAsMetadata() method is just a TypeScript wrapper to cast the value as a FilterMetadata type.

castFilterAsMetadata(
  filter: FilterMetadata | FilterMetadata[] | undefined
): FilterMetadata | undefined {
  return filter as FilterMetadata;
}

[mylifeandcode]

Having this issue as well.

[cetincakiroglu]

Hi @certifirm @Da13Harris,

I guess there was an unintended breaking change. Could you please provide a stackblitz example so we can identify and address the issue? I'm moving this to the next week's milestone until the reproducer arrives.

[cetincakiroglu]

Fixed in #15053