DataTable: In menu filter bug: Uncaught TypeError: Cannot read properties of undefined (reading '0')

[mtnoronha]

Describe the bug

If the table is set to display the filters on menu mode: filterDisplay="menu"

We get an error when changing the operation type. E.g: From 'Contains' to 'Equals':

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at Proxy.onMenuMatchModeChange (primevue_datatable.js?v=6a184f4f:3483:39)
    at onUpdateModelValue (primevue_datatable.js?v=6a184f4f:3936:33)
    at callWithErrorHandling (chunk-YBIACCRJ.js?v=f96c3d14:2305:19)
    at callWithAsyncErrorHandling (chunk-YBIACCRJ.js?v=f96c3d14:2312:17)
    at emit (chunk-YBIACCRJ.js?v=f96c3d14:8459:5)
    at Proxy.updateModel (chunk-WPQZ4WDV.js?v=f96c3d14:1071:12)
    at Proxy.onOptionSelect (chunk-WPQZ4WDV.js?v=f96c3d14:662:12)
    at onClick (chunk-WPQZ4WDV.js?v=f96c3d14:1509:37)
    at callWithErrorHandling (chunk-YBIACCRJ.js?v=f96c3d14:2305:19)
    at callWithAsyncErrorHandling (chunk-YBIACCRJ.js?v=f96c3d14:2312:17)

Reproducer

https://stackblitz.com/edit/zodgqj?file=src%2FApp.vue

PrimeVue version

3.53.0

Vue version

4.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome

Steps to reproduce the behavior

1 - Make sure table is in filterDisplay="menu" 2 - Click on Filter Icon next to column's name 3 - Click on the operator's dropdown 4 - Select another operator

Expected behavior

You can switch between different operations on filter

[tannerwoodrum]

I am having this same issue!

[anuzpandey]

I am having the same issue as well.

[marcoarruda]

I'm having the same issue!

[dsantos80PT]

I came across this issue a few days ago.

[AngelReyesEspinal]

I'm having the same issue!,

Does anyone has a solution?

cc: Primevue's team :(

[AngelReyesEspinal]

Still nothing :( ?

[tannerwoodrum]

How do we get this pushed through? This seems like a pretty big bug

[arjunarmino]

any workaround?

[tugcekucukoglu]

Correct implementation is: https://primevue.org/datatable/#advanced_filter

[IsAvaible]

@tugcekucukoglu I do not think that this issue is resolved.

Currently, there are two options for defining a filter:

• Option A: The filter is a flat object with value and matchMode property

  'createdBy.name': { value: null, matchMode: FilterMatchMode.CONTAINS },
  

• Option B: The filter is a deep object with both operator and constraints set.

  'createdBy.name': {
        operator: FilterOperator.AND,
        constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
      },
  

As seen in the basic filter example, changing the matchMode with an Option A type filter should be possible, but if we switch the display mode to menu this is not the case (see reproducer). Instead, it's currently only possible to use an Option B type filter and set :show-filter-operator="false".

When trying to change the matchMode of an Option A type filter, the aforementioned error is thrown (The only way to use a Option A type filter currently is to set :showFilterMatchModes="false".)

For consistency’s sake, it should be possible to define and use an Option A type filter in menu mode even when :showFilterMatchModes="true".

[taylordragoo]

@tugcekucukoglu I agree with the others, this issue has not been resolved.

[PawZawDev]

Problem still occurs