Dialog doesn't work well with Table/TableRow

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.

• This is not a v0.x issue.
• 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

[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);