Mui-datatables: Checkbox on SelectableRows automatically unchecked when MaterialUI Dialog is open

[dafapramudya]

Expected Behavior

Keep checked even though dialog state is open.

Current Behavior

So, I'm working with material-ui dialog. In my table I use selectableRows props with custom toolbar, the custom toolbar is a button that when user clicked it, the dialog will open. But there is a problem here. When dialog is open, checkbox automatically unchecked what I selected before, and custom toolbar disappear. I want to keep checked what i was selected before and the toolbar is not disappear. Any solution? Thanks before.

Steps to Reproduce (for bugs)

1.
2.
3.
4.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 3.8.2 |
| MUI-datatables | 2.0.0-beta.59 |
| React | 16.6.0 |
| browser | Chrome |
| etc | - |

[gabrielliwerant]

I was unable to replicate this locally. Can you create a codesandbox example to help reproduce this? Another step you can take is to reduce your material-ui version to 3.2.0 and see if that helps.

[dafapramudya]

@gabrielliwerant Here is my code: https://gist.github.com/dafapramudya/83dd6f3d2490ec8471a5852f5b08766a

Sorry, I'm not using CodeSandbox, bcz I don't know why selectableRows props not worked in codesanbox.

And I also tried to downgrade material-ui/core to v3.2.0 but no effect.

Thank you.

[gabrielliwerant]

@dafapramudya Can you construct the minimal amount of code necessary to recreate the issue? It will be very difficult for me to test what you have provided because there is quite a lot going on. We just need something very basic and simple that demonstrates the issue, so if you could subtract things until you get to the smallest example that is broken, that would be a big help.

[gabrielliwerant]

@dafapramudya It also may be helpful to you to check out the example here https://github.com/gregnb/mui-datatables/tree/master/examples/customize-toolbarselect, which uses a custom select toolbar. I added a simple dialog to this locally, and did not have any issues with the row selection, so perhaps you could build up from this.

[gabrielliwerant]

Here is a codesandbox with that example, modified to open a dialog when the user clicks the block icon in the custom toolbar: https://codesandbox.io/s/oxvkqxpmp9?fontsize=14. It shows the opening and closing of the toolbar without affecting the selected rows. Maybe you can find a reasonable way to break this?

[dafapramudya]

Hii @gabrielliwerant thank you for sharing your code, it very useful for me. It just my fault, haha, it because I put my dialog in MainComponent(parent), not in CustomToolbarSelectComponent. So CustomToolbarSelectComponent just receives props function from MainComponent, and the function is for seState({open: true}), I already tried to move my dialog to CustomToolbarComponent and that's worked haha, I really sorry about that, and thank you again 😄

[gabrielliwerant]

@dafapramudya No problem, glad you were able to get it to work!