Material-table: Detail Panel Collapse When "onClick" Actions is Used Within The Detail Panel

[jabstein]

Describe the bug
I want to add a form inside the detail panel, and with the button within it i want it to initiate a dialog prompt with "@material-ui/core/dialog" and the user returns to the open detail panel after successfully submitting the form. But for some reason whenever i click the button the detail panel all open panels collapse and the dialog box does not show until after you open the detail panel up again (this is only because the dialog component is inside the detail panel as well, if put outside of it, then the detail panel closes but the dialog box appears as it should.

To Reproduce
Steps to reproduce the behavior:

1. Have a button with dialog from "@material-ui/core/dialog" inside a detail panel
2. Click on said button
3. See Error

Expected behavior
I want to add a form inside the detail panel, and with the button within it i want it to initiate a dialog prompt with "@material-ui/core/dialog" and the user returns to the open detail panel after successfully submitting the form.

EDIT:

Codepen : https://codesandbox.io/s/3qkll63mlm?fontsize=14

I need the data={} to remain inside the render as i have a js async componentDidMount() { this.setState({ items: await (await fetch(`${process.env['REACT_APP_API']}/items`)).json(), }); }
which fills the items.

Edit2: It works as intended if both data and columns are outside the render.

[mbrn]

Can you move your column definitions to state? Because MT stores detailpanel open flag on your column definition.

[jabstein]

updated post

[mbrn]

Can you move your column definitions to state? Because MT stores detailpanel open flag on your column definition.

Did you try it?

[nagireddygatla]

I'm also facing the exact same issue. The issue is, if there is a button in the details panel, and onClick of the button if I open a Dialog, the button is opened, but the details panel is collapsed. Did anybody got this working? Thanks!

[gblackiv]

I am running to a very similar issue here. Whenever any material-ui Dialog opens, the panel closes (it does not matter where the dialog is opened from). I attempted to put my columns within state, as @mbrn suggested, but it did not solve the issue. I also do not see any detailpanel open flag within any of the column objects.
Any updates on what is going on, or any work arounds that you guys have found?

[mikepricedev]

It seems internal state is being collocated on rowData passed in the data prop to MT. If any of the rowData instances (representing the same data) change between renders, that state gets wiped out.

Could this be addressable with a public onDetailPanelToggle(rowData, expanded:boolean) cb and a expanded boolean on the DetailPanel or Column objects? Allowing for state tracking independent of MT. MT would not need to be opinionated in how state between different instances of the same rowData be tracked.

In a way this is how I'm addressing my issue in an albeit hacky manor (i.e. unstable) as I needed private knowledge of the MT implementation.

// Store persistent rowData state in a ref.
const rowsState = useRef(new Map());

const data = useMemo(()=>{
  const newRowsState = new Map();
  const oldRowsState = rowsState.current;
  const data = [];
  for(let row of rows) {
   const { tableData } = oldRowsState.get(row.id)?. tableData ?? {};
   row = {
       ... row,
       tableData
    };
    data.push(row);
    newRowsState.set(row.id, row);
  }
  // Avoid holding onto refs of old rowData by replacing rowState.current
  rowsState.current = newRowsState;
  return data;

}, [rowState, rows]);

[stale[bot]]

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.