Material-ui: [Popper] Position flicker regression in v4

[Ericnr]

My poppers positioning is flickering, its easily reproducible in the docs codesandbox example.
CodeSandBox Link
I just added some spacing so that the effect is more apparent. It seems to happen only about 30% of the time when you click it in the docs example so if you click it enough times you'll notice it. For whatever reason it happens much more often in my app.

[eps1lon]

This will take some more time. I suspect it has to do with creating the popper in a passive effect instead of a layout effect. Though it's weird that the exact demo works in our docs.

[oliviertassinari]

@eps1lon I can confirm your intuition. This change seems to solve the problem:

diff --git a/packages/material-ui/src/Portal/Portal.js b/packages/material-ui/src/Portal/Portal.js
index bdcecab07..1e00e3090 100644
--- a/packages/material-ui/src/Portal/Portal.js
+++ b/packages/material-ui/src/Portal/Portal.js
@@ -28,7 +28,7 @@ const Portal = React.forwardRef(function Portal(props, ref) {
     }
   }, [container, disablePortal]);

-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     if (onRendered && mountNode) {
       onRendered();
     }

I would suspect a regression from #15399.

[oliviertassinari]

@Ericnr Do you want to submit a pull request to solve the problem? :)

[Ericnr]

@oliviertassinari eh, I'm too much of a newbie to be confident to do that, I'll leave it to you guys!

[Arlevoy]

@oliviertassinari I wanted to start contributing and it feel like a very easy start so I just opened https://github.com/mui-org/material-ui/pull/15943, not sure if it was the proper way so let me know if so!

[oliviertassinari]

@Arlevoy A simple issue is perfect to start with. People already have to: cloning the repository, installing it on their machine, run the documentation, opening a pull request with the change & passing the review phase. The first time for me was challenging.