[Popper] Render function placement argument is not updated

[capsule5]

class MuiTooltip-tooltipPlacementBottom is always applied by default.
if props placement is set to top then MuiTooltip-tooltipPlacementTop is always applied.
It's not upated according to x-placement anymore

[oliviertassinari]

You can use the [x-placement*="top"] CSS selector as a workaround.

[capsule5]

thanks but does it mean that tooltipPlacementBottom/Top is not working anymore?
I was doing something like :

<Tooltip
    placement="top"
    classes={ {
      tooltip: styles[`tooltip--${theme}`],
      tooltipPlacementBottom: styles["tooltip--bottom"],

And it was working as expected: top by default and the extra MuiTooltip-tooltipPlacementBottom was applied when the tooltip placement was at bottom

[oliviertassinari]

@capsule5 Interesting, ignore my previous comment. This seems to be a regression coming from #16613.

[capsule5]

thanks your tip will do the job waiting for the fix

[oliviertassinari]

@capsule5 What do you think of this diff?

diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js
index 55a4ff0903..5d6bd6c39b 100644
--- a/packages/material-ui/src/Popper/Popper.js
+++ b/packages/material-ui/src/Popper/Popper.js
@@ -77,14 +77,9 @@ const Popper = React.forwardRef(function Popper(props, ref) {
    * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
    */
   const [placement, setPlacement] = React.useState(rtlPlacement);
-  if (rtlPlacement !== placement) {
-    setPlacement(rtlPlacement);
-  }

   const handleOpen = React.useCallback(() => {
-    const popperNode = tooltipRef.current;
-
-    if (!popperNode || !anchorEl || !open) {
+    if (!tooltipRef.current || !anchorEl || !open) {
       return;
     }

@@ -97,7 +92,7 @@ const Popper = React.forwardRef(function Popper(props, ref) {
       setPlacement(data.placement);
     };

-    const popper = new PopperJS(getAnchorEl(anchorEl), popperNode, {
+    const popper = new PopperJS(getAnchorEl(anchorEl), tooltipRef.current, {
       placement: rtlPlacement,
       ...popperOptions,
       modifiers: {
@@ -114,6 +109,7 @@ const Popper = React.forwardRef(function Popper(props, ref) {
       },
       // We could have been using a custom modifier like react-popper is doing.
       // But it seems this is the best public API for this use case.
+      onCreate: createChainedFunction(handlePopperUpdate, popperOptions.onCreate),
       onUpdate: createChainedFunction(handlePopperUpdate, popperOptions.onUpdate),
     });
     handlePopperRefRef.current(popper);

Do you want to submit a pull request with a fix :)? I'm not sure we can add any great test for it 🤔

cc @eps1lon for double-checking. It seems that the problem originates from the rtlPlacement !== placement branch that negates any effect of the on update logic. This can be particularity noticed by adding a console log in the popper render function and moving the anchor element to an edge, the console log should spam the console at each small scroll change on the edge. Still, I think that the other changes of #16613 are great to keep.