primevue icon indicating copy to clipboard operation
primevue copied to clipboard

DataTable filter should allow constraints to be undefined

Open mrichar1 opened this issue 4 years ago • 4 comments

https://codesandbox.io/s/vue-3-datatable-constraints-hp1w5?file=/src/components/HelloWorld.vue

I'm submitting a ... (could count as either?)

[ x ] bug report
[ x ] feature request

CodeSandbox Case (Bug Reports)

https://codesandbox.io/s/winter-microservice-vkwn0?file=/src/App.vue

Current behavior

When using Filter menu mode, if the filtersobject doesn't contain an appropriate constraints property, then when the match mode is selected from the UI the app crashes - e.g. _filters[this.field].constraints is undefined.And if operator is unset, the UI doesn't display the ability to add rules, even if showFilterOperator is true.

Expected behavior

There should be defaults for these in order that not setting them is not an error (e.g. in Filter row mode there are no errors if an empty object is passed (i.e matchMode can be undefined)).

operator could be set to a default value ('and' ?) if showFilterOperator=true", and constraints could default to e.g. [{ matchMode: 'contains' }]

  • Vue version: 3.2

  • PrimeVue version: 3.7.1

  • Browser: all

mrichar1 avatar Oct 14 '21 10:10 mrichar1

Hi - sorry I should have given clearer instructions to reproduce.

I have forked the sandbox with the bug: https://codesandbox.io/s/crazy-http-l6xug -the name column has the constraints bug, the country column the match/operator bug..

For the constraints bug, we remove constraints - e.g.:

"name": {
    operator: FilterOperator.AND,
},

Then do the following:

  1. Click on the filter icon for that column.
  2. Select a 'Match Mode' - e.g startsWith.

The console will now show the error _filters[this.field].constraints is undefined

For the operator bug, we set showFilterOperator: true (the default), then remove operator - e.g.:

"country.name": {
  constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
},

Now the UI doesn't show the 'Match any/all' dropdown.

mrichar1 avatar Nov 02 '21 11:11 mrichar1

In case of using multiple constraints, 'operator' adds more constraint to filter and new 'constraints' must be an array. So usage of 'operator' without 'constraints' is not valid.

And also when you did not add 'operator', it doesn't add another constraint to filter and then even if 'showFilterOperator' is true, it does not render it to the UI.

tugcekucukoglu avatar Nov 11 '21 13:11 tugcekucukoglu

Yes - I appreciate that each one by itself doesn't make sense - what I'm asking for is for PrimeVue to assume sensible defaults if some of the properties are missing.

This is how 'single' filters already work - for example, if you specify:

filters: {
  name: {}
}

The code will assume defaults equivalent to:

filters: {
  name: { value: null, matchMode: FilterMatchMode.STARTS_WITH }
}

It would be good if equivalent defaults could be picked for multiple constraints.

If you specify operator it should assume that you want at least one constraint, with the defaults equivalent to the above (i.e empty value. startsWith match mode). For example:

filters: {
  name: { operator: "and" }
}

would be equivalent to:

filters: {
  name: {
    operator: "and",
    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
 }
}

Equally, if you specify constraints, and showFilterOperator is true, then it should assume that operator was set, defaulting to AND. For example:

filters: {`
  name: {
    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
  }
}

would be equivalent to:

filters: {`
  name: {
    operator: "and",
    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
  }
}

I hope this makes sense - please let me know if this still isn't clear!

mrichar1 avatar Nov 11 '21 14:11 mrichar1

When implementing this, we initially wanted to give sensible defaults but I remember it complicated the code. I think the feature is mature now and we can work on enhancements to give defaults to make the usage easier for sure. @mertsincan will work on it.

cagataycivici avatar Dec 07 '21 07:12 cagataycivici

Just rediscovered this issue while hitting this bug again in a new project - has there been any progress on this?

mrichar1 avatar Feb 09 '23 21:02 mrichar1

no progress for now, the default filters still required to be set by the user. when it is not set, the filter function works, but the error 'defaultConstraint is undefined' appears when user try to clean the filter. Tested on PrimeReact 8.6.1

LeandroMarcondes avatar Feb 16 '23 06:02 LeandroMarcondes

A workaround is set the 'filters' on the event 'onFilter' like that:

On render <DataTable onFilter={onFilter} filterDisplay="menu" filters={filtersOnTable} >

on React const onFilter = (event) => { setFiltersOnTable(event.filters); }

The error still happens if user try to clear filters without type any filter, but after type a filter the clear button starts to work.

Maybe it can be implement as default.

LeandroMarcondes avatar Feb 16 '23 06:02 LeandroMarcondes