React-bootstrap-table2: onFilter hook is broken

[webskin]

Hello,

The example here :
https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Filter%20Hooks&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

is broken

I have tried this hook in my own project and I have the same error.

Best Regards.

[webskin]

I found the problem : it is not a hook but a customFilter :)

We must take the filtered data in second parameter and return a filtered collection :

onFilter: (filterVal, data) {
  return data.filter(elmt => elmt.includes(filterVal))
}

To conclude it is just a matter of documentation :)

[webskin]

One remark : onFilter is not called when the text in the input is deleted.

Is it normal ?

[jendamozna]

For me it seems like bug. According to docs it does not require return value. "...called when column filter being triggered. If you return..." https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/filter-props.html#textfilter

I was using it as a handler without return value to update some app state when user changes filter. Now i cant find a solution as onTableChange works only in remote mode.

[webskin]

hum...

This is why onFilter is not called when manually clear filter

[webskin]

@jendamozna The workaround is to listen input change is to use the onInput Event Attribute because onChange is already used.

https://www.w3schools.com/tags/ev_oninput.asp

textFilter({
  dataField: 'id',
  text: 'id',
  onInput: function(e) {
    // our code here
  }
});

We can do this because of :

https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2-filter/src/components/text.js#L110

[jendamozna]

Thanks, onInput is working fine. Applicable also on selectFilter().

[AllenFang]

it's a regression issue from last version, I will fix it soon

ref: https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/1032/files

[AllenFang]

Fixed in newest version:

https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2019/08/25/version-bump.html