DataTable: Column Filter Typescript fix about primereact HOT 19 CLOSED

PR submitted.

from primereact.

@melloware awesome, thank you!

from primereact.

First your StackBlitz is a mess. Here is how to properly do a locale to Arabic.

https://stackblitz.com/edit/pt46mo?file=src%2Fmain.tsx

You didn't follow the PrimeTek instructions https://primereact.org/configuration/#Locale

from primereact.

Second how do I get your filter.trim issue its not happening for me? Your stackblitz doesn't even have a multi-select filter in it?

from primereact.

Here is a working Multiselect Filter in Arabic: https://stackblitz.com/edit/zwnmig?file=src%2Fmain.jsx,src%2FApp.jsx

Just change the Agent column you will see its all working...

from primereact.

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.

from primereact.

I am using next.js , maybe its because next.js has the issue , its working on vite but not in next.js not sure why

will try to make an example and upload it here with next js

from primereact.

Nope look at my example it works fine it won't matter next.js or vite you have a bug in your code...

Make sure you have representative: { value: null, matchMode: FilterMatchMode.IN }, correct? as FilterMatchMode.IN for the type of multi-select filter?

from primereact.

will try to debug and tell the results

from primereact.

I found the issue , the issue that I must add filterMatchMode="in" to the column but there is a typescript issue when I did that

No overload matches this call.
  Overload 1 of 2, '(props: ColumnProps | Readonly<ColumnProps>): Column', gave the following error.
    Type '"in"' is not assignable to type 'FilterMatchMode | undefined'.
  Overload 2 of 2, '(props: ColumnProps, context: any): Column', gave the following error.
    Type '"in"' is not assignable to type 'FilterMatchMode | undefined'.ts(2769)
column.d.ts(967, 5): The expected type comes from property 'filterMatchMode' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Column> & Readonly<ColumnProps>'
column.d.ts(967, 5): The expected type comes from property 'filterMatchMode' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Column> & Readonly<ColumnProps>'
(property) filterMatchMode?: FilterMatchMode | undefined
Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom".

from primereact.

@fullstackomar here is a TypeScript version it works fine with in...

https://stackblitz.com/edit/ewtchr?file=src%2FApp.tsx

from primereact.

thank you melloware , I was using it inside the Column but I think there is a typescript that needs to be changed inside the column files i used @ts-ignore for now but I think it should be added into the next update

<Column field="city" header="المنطقة" filter filterElement={dropDownTemplate(cities.map((c) => c.value),"choose city")} showFilterOperator={false} showFilterMatchModes={false} filterMatchMode="in" showAddButton={false} style={{ minWidth: "120px" }} />

from primereact.

I added an extra string to the filterMatchMode inside column and the problem is fixed but please if u can add it to the next patch it would be amazing :)

filterMatchMode?: FilterMatchMode | undefined | string;

from primereact.

Hey all, the change that was made to the type for filterMatchModeOptions seems to have broken the match mode dropdown when supplying custom options as it was relying on the property name being value.

https://stackblitz.com/edit/ko42te?file=src%2FApp.jsx

from primereact.

@ssode your stackblitz is not even typescript? these changes were only to Typescript defs.

from primereact.

https://stackblitz.com/edit/wwhfur?file=src%2FApp.tsx

from primereact.

@ssode i am still not seeing any compiler Typescript complaining? What exactly is your issue?

from primereact.

@melloware The issue is that the change to the type for filterMatchModeOptions is breaking the match mode dropdown in the filter menu (for me at least). The option isn't getting selected by default and when you do click on it and try to filter it doesn't return any results.

It looks like internally the matchMode on the filter object is being set to the entire object from filterMatchModeOptions:

Since the key was changed from value to matchMode the dropdown isn't handling it correctly, I think either the optionValue prop needs to be set on the Dropdown that gets created to specify the new key or the options need to be mapped back to a { label, value } object here.

from primereact.

@ssode my bad PR submitted: #6314

was a cut and paste mistake.

from primereact.