DataTable filterDisplay="menu", Uncaught TypeError

[jnoren1]

Describe the bug

Attempting to use the DataTable with the FilterDisplay set to "menu" gives the following (abreviated) error and the form elements do not respond (no typing/ no selecting). The only workaround that I have found is to use the FilterDisplay set to "row".

react-dom.development.js:19602 Uncaught TypeError: Cannot read properties of undefined (reading '0')
at onInputChange (webpack-internal:///(app-pages-browser)/./node_modules/primereact/datatable/datatable.esm.js:3175:33)
at onChange (webpack-internal:///(app-pages-browser)/./node_modules/primereact/datatable/datatable.esm.js:3410:16)

This issue also affects the examples on the Data Table doc page and that is what I have linked to for the reproduction below.

I suspect that globalFilters may be a requirement since that is the only that thing that the one working example has that the others do not, but that isn't explained anywhere and it would be nice to understand what/how/why those would be a requirement.

Reproducer

https://codesandbox.io/s/vti0lt?file=/src/App.tsx

PrimeReact version

9.6.2

React version

17.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

Any

Steps to reproduce the behavior

1. Go to line 136 on App.tsx, change the filterDisplay option to "menu".
2. Attempt to use the filter, it will fail.
3. Changing the filterDisplay back to row, will cause it to succeed.

Expected behavior

filterDisplay="menu" should render properly and allow for filtering. If additional properties or requirements are needed to make this functional, those should be clearly explained in the api.

[melloware]

You are using it wrong. Here is a working demo: https://stackblitz.com/edit/react-lg2wbf?file=src%2FApp.tsx

When using menu you need to change your filter definitions to have operator: FilterOperator.AND / operator: FilterOperator.OR it is a different JSON object than for row mode as it needs to know AND or OR if you add multiple of the same filter.

const defaultFilters: DataTableFilterMeta = {
  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
  name: {
    operator: FilterOperator.AND,
    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
  },
  'country.name': {
    operator: FilterOperator.AND,
    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
  },
  representative: { value: null, matchMode: FilterMatchMode.IN },
  date: {
    operator: FilterOperator.AND,
    constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }],
  },
  balance: {
    operator: FilterOperator.AND,
    constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }],
  },
  status: {
    operator: FilterOperator.OR,
    constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }],
  },
  activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
  verified: { value: null, matchMode: FilterMatchMode.EQUALS },
};

[jnoren1]

Thank you for your quick response. However, a follow question. Even in your example there are several fields that do not have the operator and they show simple, functional filters. But if you reduce, "status" to appear similar to "activity", it fails. The display works fine (removing the addition of the filteroperator and the "add rule"), but the execution fails with the stated error.

I have some use cases where I do not want to support complex filters mostly at the server level, because the need isn't there and I would like to use the more simplified non-multiple version.

Any thoughts, would be greatly appreciated.

[melloware]

Let me take a closer look. You are right that would not seem correct.

[melloware]

@jnoren1 status is working fine for me: https://stackblitz.com/edit/react-lg2wbf

if I change..

  status: {
    operator: FilterOperator.OR,
    constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }],
  },

to..

status: { value: null, matchMode: FilterMatchMode.EQUALS },

[jnoren1]

Thank you for investigating. I see that indeed, status does seem to work that way. I am not sure what I did wrong the other day, but the status field is working as you described. I moved onto the balance field to see if I could replicate the issue I was experiencing. I have now gone through each field to see what would happen if the 'advanced' mode is replaced with the simple mode and have gotten mixed results. For numbers, dates, and drop downs. We are able to filter the value using the default MatchMode (whatever is set in code) but changing the MatchMode in the UI crashes with the error described.

Text fields, however, don't work at all in simple mode. Neither changing the MatchMode nor filtering.

https://stackblitz.com/edit/react-lg2wbf-bmsdem?file=src%2FApp.tsx

[melloware]

OK now I can reproduce it. Thanks for the reproducer!

[jnoren1]

Thank you for looking at it, and making a change. I was reviewing the change you made to better understand the project and had another question. Did that solve both issues? Using the same reproducer as before. No field allows you to change the MatchMode. Previously you couldn't do anything with text fields, I think that is now solved with #4865. But for those fields that the UI allows you to change the MatchMode (Number, Date, Text), you can't. Same error.

[melloware]

I will take a look.

[melloware]

I am testing locally with these filters.

    const initFilters = () => {
        setFilters({
            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
            name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
            'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
            representative: { value: null, matchMode: FilterMatchMode.IN },
            date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
            balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
            activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
            verified: { value: null, matchMode: FilterMatchMode.EQUALS }
        });
        setGlobalFilterValue('');
    };

And its all working for both non MatchMode and MatchMode filters?

[jnoren1]

Thank you. Note though, the same issue occurred separately with the 'date' field and the 'balance' field when transitioned from the advanced mode you have in your test to the simplified mode. Not sure if that is relevant but since they are different filter types (numeric vs date vs text), I figured I would ask about it. Would it be useful to test with the following:

    const initFilters = () => {
        setFilters({
            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
            name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
            'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
            representative: { value: null, matchMode: FilterMatchMode.IN },
            date: { value: null, matchMode: FilterMatchMode.DATE_IS },
            balance:{ value: null, matchMode: FilterMatchMode.EQUALS },
            status: { value: null, matchMode: FilterMatchMode.EQUALS },
            activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
            verified: { value: null, matchMode: FilterMatchMode.EQUALS }
        });
        setGlobalFilterValue('');
    };

[melloware]

OK I submitted another fix it needed to be fixed in another location as well.

[jnoren1]

Thank you.

[rfdt]

Hello, i have the same bug. I'm getting a similar error. When the mode is menu. I tried to set the operator rule and it works but it adds extra fields to me when displaying, I don't need it. What to do with it. I circled an unnecessary field.

[melloware]

@rfdt if you still have an issue please open a new ticket with Stackblitz reproducer against 10.0.4 so we can see the issue.