search

gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 934 forks source link

Filtered values get reset in case of multiple selection of items. #977

Open manojakuri opened 5 years ago

manojakuri commented 5 years ago

Filtered values get reset when you have multiple selection data-table. On selecting a single all all rows from header, the filter reset and displays all rows

Expected Behavior

If you filtered a data table and have a multiple selectable rows, the filter should stay unless user removes the filter or reset filter or changes any filter values. Data- Table shouldn't keep the state of filter and should only show filtered rows on single or multiple row selection

Current Behavior

On multiple data-table adding a filter and selecting a single or multiple rows on filtered results, control removes filter and shows all rows

Tech Version
Material-UI 4.4.3
MUI-datatables 2.11.1
React 16.10.1
browser Chrome/Safari
etc
gabrielliwerant commented 5 years ago

Hey @manojakuri, not sure I completely understand how to reproduce this. Can you add explicit steps? What does selecting "all all rows from header" mean? The select all checkbox? That doesn't seem to have any impact on the filters for me:

capture

alexcberk commented 5 years ago

I have the same issue using the steps in your screenshot @gabrielliwerant.

Haven't had time to dig in yet, here are the custom table options I'm using, maybe one of the custom function handlers is the cause?


  const tableOptions = {
    customSearch: searchUtil,
    customToolbarSelect: () => (
      <Box my={'6px'} marginRight={'24px'}>
        <BulkEditModal
          executeCommand={executeCommand}
          selectedData={selectedData}
        />
      </Box>
    ),
    download: true,
    downloadOptions: {
      filename: 'test.csv',
      separator: ','
    },
    filter: true,
    filterType: 'checkbox',
    fixedHeader: true,
    pagination: true,
    print: false,
    responsive: 'scrollMaxHeight',
    rowsPerPage: 6,
    rowsPerPageOptions: [6, 12, 18],
    rowHover: true,
    search: true,
    selectableRows: 'multiple' as SelectableRows,
    searchText: searchText || '',
    sort: true,
    viewColumns: false,
    onRowsSelect: handleRowSelect,
    rowsSelected,
  };```

Tech | Version
-- | --
Material-UI | 4.0.0
MUI-datatables | 2.11.0
React | 16.8.5
browser | Chrome
gabrielliwerant commented 5 years ago

These are the only options I'm using:

const options = {
  filter: true,
  filterType: 'multiselect',
  responsive: 'stacked',
};

Can you start with that and see if you have the issue? If so, can you downgrade material ui to v3.x.y and check again? Then downgrade react to 16.6.3 and try again. Then add options until you reach the error. I need the exact conditions to replicate it and fix it.

alexcberk commented 5 years ago

Try this one. Follow the same repro steps as your gif above. It appears to happen when a state hook is used within the onRowsSelect handler. https://codesandbox.io/s/muidatatables-example-u6u8b

gabrielliwerant commented 5 years ago

@acberk Thank you. It looks like it happens on any filter type when there's manual state updating on the selected rows. Will take a look when I get a chance.

alexcberk commented 5 years ago

@gabrielliwerant Have you had a chance to look at this one?

gabrielliwerant commented 5 years ago

Not yet, sorry, been a bit swamped, but it's on my list for things to do next time I have a good chunk of time, and would like to get it looked at for the next minor release.

alexcberk commented 5 years ago

Some quick investigation - appears to be related to v2.5.1: https://github.com/gregnb/mui-datatables/compare/2.5.0...2.5.1

The problem goes away if you roll back the codesandbox page to v2.5.0.

alexcberk commented 5 years ago

@gabrielliwerant I tested and submitted PR #1058