Edit row (without cancelling or completing) sticks when rerendering component.

[Totalbug92]

Describe the bug
I have a parent component where you can choose between displaying different tables(as child components). If i click edit on a row, and then switch to view another table, and then switch back to the original table, the editRow is still active. It also bugs out allowing me to interact with the rest of the table.

This may be just me programming the view in a poor way, so if anyone has a smart way to switch between tables and rerender their state completly don't hesitate to tell me.

To Reproduce
Described above

Expected behavior
To either have editRow still be in progress, with rest of table disabled. Or when coming back to original table refresh it without any edit rows still being in progress.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 76.0.3809.132

[Totalbug92]

A fix that worked in my application(Using typescript):

create a ref in constructor
public MTRef: any = React.createRef()

add tableRef prop to MaterialTable
tableRef={this.MTRef}

add this to componentDidMount

if(this.MTRef.current !== null){

  this.MTRef.current.state.data.forEach(element => {

    if(element.tableData.hasOwnProperty('editing')){

      delete element.tableData.editing
    }
  });
}

[jayarjo]

I guess the proper behavior in this case will be to have edit row component active/visible, but having the rest of the table inactive/disabled.

[Domino987]

I think this will be fixed with #1174 . When my PR is through, can you test it again?
and @Totalbug92, I hope you will not have to use this hotfix anymore.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.