more than 1 filter doesn't work

[mrjones-plip]

if you try and add two filters to a maptable, only the first filter works. removing N filters so there's only 1 left, makes the sole filter work again.

[melalj]

is it for all browsers?
Did you get any error message on the console?

[mrjones-plip]

Tested in FF latest, Chrome latest and IE11. no errors on console :(

[melalj]

No time to pull the code.
Here's the changes that you need to make for https://github.com/Packet-Clearing-House/maptable/blob/master/src/components/Filters.js#L307

filterData() {
    const that = this;
    this.maptable.data = this.maptable.rawData.filter(d => {
      const rowNodes = document.querySelectorAll('.mt-filter-row');
      let matched = true;
      for (let i = 0; i < rowNodes.length && matched; i++) {
        const rowNode = rowNodes[i];
        const filterName = rowNode.getAttribute('data-mt-filter-name');
        const columnDetails = that.maptable.columnDetails[filterName];
        const fmt = columnDetails.dataParse; // shortcut

        if (columnDetails.filterMethod === 'dropdown') {
          const filterValue = rowNode.querySelector('.mt-filter-value').value;
          if (filterValue === '') continue;
          if (d[filterName] !== filterValue) matched = false;
        } else if (columnDetails.filterMethod === 'field') {
          const filterValue = rowNode.querySelector('.mt-filter-value').value;
          if (filterValue === '') continue;
          if (d[filterName].toLowerCase().indexOf(filterValue.toLowerCase()) === -1) {
            matched = false;
          }
        } else if (columnDetails.filterMethod === 'compare') {
          const filterRange = rowNode.querySelector('.mt-filter-range').value;
          if (filterRange === 'BETWEEN') {
            const filterValueMin = rowNode.querySelector('.mt-filter-value-min').value;
            const filterValueMax = rowNode.querySelector('.mt-filter-value-max').value;
            if (filterValueMin === '' || filterValueMax === '') continue;
            if (fmt &&
              (fmt(d[filterName]) < fmt(filterValueMin) ||
                fmt(d[filterName]) > fmt(filterValueMax))
            ) {
              matched = false;
            } else if (
              parseInt(d[filterName], 10) < parseInt(filterValueMin, 10) ||
              parseInt(d[filterName], 10) > parseInt(filterValueMax, 10)
            ) {
              matched = false;
            }
          } else {
            const filterValue = rowNode.querySelector('.mt-filter-value-min').value;
            if (filterValue === '') continue;
            if (fmt && !utils.rangeToBool(fmt(d[filterName]), filterRange, fmt(filterValue))) {
              matched = false;
            } else if (!fmt && !utils.rangeToBool(d[filterName], filterRange, filterValue)) {
              matched = false;
            }
          }
        }
      }
      return matched;
    });
  }

Let me know if that works 😉

EDIT: fixed

[mrjones-plip]

same result: only one filter works and no errors in console.

[mrjones-plip]

still the same, but this time i get an error in the console on the exact line I added (the if() one above):

ReferenceError: filterName is not defined

this didn't help:

if (filterName !== null && d[filterName] !== null && d[filterName].toLowerCase().indexOf(filterValue.toLowerCase()) !== -1) {
  matched = false;
}

[melalj]

I edited the previous comment