Material-ui: Dialog doesn't work well with Table/TableRow

[Michaeltym]

I add a onClick event to TableRow component, when user clicks the row, it should highlight the selected row and show a button. User can click the button and open a modal to fill a form. But when user clicks the textfield in the dialog, the onClick event get triggered which closes the dialog.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Dialog should keep open when textfield is focused.

Current Behavior 😯

When textfield in the dialog is focused, dialog is closed.

Steps to Reproduce 🕹

Link:
https://codesandbox.io/s/5vwyjr35pl

1. click the first row
2. click open
3. click TextField in the dialog

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.3 |
| React | v16.8.6 |
| Browser | Chrome 74.0.3729.131 |

[kafein]

Try this; https://codesandbox.io/s/100094qy74

[Michaeltym]

@kafein thanks for the reply, it doesn't fix the issue unfortunately. In my project, if user clicks the row again, it should remove the background colour and hide the button. With your approach, user cannot deselect a row.

[kafein]

I think it is not a library bug. Sandbox updated, can you please check it again?

[eps1lon]

The problem is that any click in the dialog bubbles up to the TableRow in which it toggles it's highlighted state. When it's not highlighted the Dialog unmounts as well.

It's a common pitfall in React to assume events bubble up according to the DOM but they actually bubble through portals. See facebook/react#11387 for the relevant discussion about this. The simplest workaround is to not toggle. A better workaround would be to either refactor your component tree or stop propagation of click events in your Dialog.

[oliviertassinari]

@eps1lon Wow, I always thought that the event wasn't bubbling in the Portal. I have learned something :).

@Michaeltym In this case, I would probably mount a single Dialog outside the Table, or filter the wrong events:

const contains = event.currentTarget.contains(event.target);