filterFormatted not working as expected

[rvaldeolmillos]

Hi,
When using a column filter (tried with a SelectFilter) and the property fileFormatted is set to true on column, the filtering is not working properly.
Inspecting the code it seems that the targetVal is converted to lowerCase, but not filterVal, therefore there is no match if value has a capital letter.
Version: 2.3.9

Somewhere in your code:

default:
  {
    if (filterObj[key].type === _Const2['default'].FILTER_TYPE.SELECT && filterFormatted && filterFormatted && format) {
      filterVal = format(filterVal, row, formatExtraData);
    }
    valid = _this4.filterText(targetVal, filterVal);
    break;
  }

where filterText function is defined as:

function filterText(targetVal, filterVal) {
      if (targetVal.toString().toLowerCase().indexOf(filterVal) === -1) {
             return false;
       }
      return true;
}

Regards.

[rvaldeolmillos]

An obviously solution would be converting the filter value obtained from format() function to lowercase:

if (filterObj[key].type === _Const2['default'].FILTER_TYPE.SELECT && filterFormatted && format) {
                filterVal = format(filterVal, row, formatExtraData)**.toString().toLowerCase()**;
}
valid = _this4.filterText(targetVal, filterVal);

[AllenFang]

@rvaldeolmillos sorry for lately reply, busy on work. I'll check this out. BTW, could you please show me an example for reproducing this issue? thanks :)

[rvaldeolmillos]

OK, here goes a basic example to reproduce the issue. Notice the capital in "Bad".
Select Bad in the filter and no row is matched. The search instead works fine.

import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

const products = [];

const qualityType = {
  0: 'good',
  1: 'Bad',
  2: 'unknown'
};

function addProducts(quantity) {
  const startId = products.length;
  for (let i = 0; i < quantity; i++) {
    const id = startId + i;
    products.push({
      id: id,
      name: 'Item name ' + id,
      quality: i % 3
    });
  }
}

addProducts(5);

function enumFormatter(cell, row, enumObject) {
  return enumObject[cell];
}

export default class SelectFilter extends React.Component {
  render() {
    return (
      <BootstrapTable data={ products } search={ true }>
        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='quality' filterFormatted={ true } dataFormat={ enumFormatter } formatExtraData={ qualityType } filter={ { type: 'SelectFilter', options: qualityType } }>
           Product Quality
        </TableHeaderColumn>
      </BootstrapTable>
    );
  }
}

[rvaldeolmillos]

[AllenFang]

@rvaldeolmillos, thanks. I'll check this out.

[AllenFang]

@rvaldeolmillos, fixed on newest version.

[rvaldeolmillos]

Hi @AllenFang, I've updated to version 2.5.0 but I still don't get it right ?

[AllenFang]

HI @rvaldeolmillos, are you sure? I cant reproduce this issue by your example. could you please confirm?

[rvaldeolmillos]

Hi @AllenFang,

Checked with master branch and it's still failing...
I took the example from your own example /examples/js/column-filter/select-filter.js, just turning a capital letter in product qualities - the search flag is not important-, so it should be really easy to reproduce the problem.

[AllenFang]

@rvaldeolmillos, Fixed on v2.5.2. Thanks :)