search

gregnb / mui-datatables

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

onTableChange hit 'Maximum update depth exceeded' error if columns have render select or autocomplete controls. #1212

Open lifangbin opened 4 years ago

lifangbin commented 4 years ago

//Error happened onTableInit or onTableChange if the columns render some dropdonw list like 'select' or 'autocomplete' const options = { filter: true, filterType: "dropdown", responsive: "scrollMaxHeight", onTableInit: this.handleTableInit, onTableChange: this.handleTableChange };

Expected Behavior

I am using MUI data table as child component and form submit in parent component. which it need tableState data once submit. I planning to use onTableChange event to return the tableState and pass to parent component.

Current Behavior

Steps to Reproduce (for bugs)

please look at here https://codesandbox.io/s/lucid-platform-1kvxj

  1. un-comment onTableInit or onTableChange event.
  2. Error 'Maximum update depth exceeded' will be happened.

Your Environment

Tech Version
Material-UI 4.9.5
MUI-datatables 2.14.0
React 16.12.0
browser Chrome
etc
gabrielliwerant commented 4 years ago

I do not think you want to use onTableChange or onTableInit here. Simply update your table state with the onChange functions on the form components in your customBodyRender. Not sure what you mean by "autocomplete." If this is default browser functionality, it should have no impact. If this is a 3rd party library, I cannot make any guarantees about how it will interact with this library and it will be out of scope to ensure it does.