Question: How to use material-ui react components with the Portal Pattern?

[real-ashwin]

While trying to show a dialog from an absolutely positioned div I faced some issues. Centering the dialog on the page with only CSS was not possible.
Also, the dialog uses position:fixed;left:100% which is fine when the Dialog is inside "body". But with my div, it ended up being invisible but draggable just to the left of my div.

After some search, I found that the solution is to use the the Portal Pattern. But this gave me a lot of errors. (Warning: owner-based and parent-based contexts differ ) .
So, I was wondering if there is an example on how to use the material-ui Dialog with the Portal pattern.
Also, I apologize for not providing an example. I will recreate a scenario outside my project and link it here when I am done.

[alitaheri]

I sense a case of XY Problem.
From what i understand the Portal Pattern is used for non-reactive tasks. Material-ui is completely reactive.
That is an issue with the dialog, it should get out of layout and do its thing. But looks like in this particular case it fails.
I would suggest a different approach to patch up this issue.
If you are using flux handle this with actions and respond to them.
Otherwise, have some higher up component provide a .showDialog(innerComponent) on it's child context and have your absolute div's Component call that function from the inherited context.
I can provide more explanation if you like my suggestions. :D

[real-ashwin]

Thanks @subjectix .
ProblemX : I have a flow chart where the steps are represented as boxes. These boxes are absolutely positioned on the page so that the user can drag them around. User can double click the box and enter text in the dialog that pops up. This dialog is the one causing centering issues and a shadow dialog as in the image in my question.

I was about to try the "higher up component provide a showDialog" solution that you suggested but I thought I will ask here so that I can get your inputs. Thank You for your suggestions.

Also, https://github.com/tajo/react-portal makes me think that the Portal Pattern is not only for non-reactive components.

[alitaheri]

I see, I looked at react-portal. The thing about using portals for react components is that they aren't really designed with them in mind, especially those who rely heavily on contexts, even if material-ui does somehow patch that up so you can use the portal pattern, themes will surely give you trouble.

I'd suggest your flow chart component to have that "method" of editing. This way even if you change your mind about modals (which I suggest you do) you can easily change your strategy.
Your flowchart component holding all the states, can enable editing and re-render after the user submits. Easy and concise. 😎

But... the "dialog doesn't work within absolutely positioned elements" issue would still need resolving :D

[chrismcv]

#1621 I think this is the same issue in a different guise... portal/layer-mixin will work, you just need some magic to pass the context through...

[real-ashwin]

Also #1669 seems to be the same issue.

[chrismcv]

Just noticed with #1669 - the transforms might be causing this because they're creating a new CSS stacking context... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

[chrismcv]

#1845 should resolve this

[alitaheri]

addressed in #2129