[pickers] Open animation origin bug when reversed

[oliviertassinari]

Steps to reproduce 🕹

Link to live example:

Steps:

1. Open https://mui.com/x/react-date-pickers/#overview
2. Make the popup open above
3. See how the animation transformation origin is wrong https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin, it's at the top center, rather at the bottom center of the popup.

Current behavior 😯

Screen.Recording.2023-08-11.at.18.48.36.mov

Expected behavior 🤔

https://mui.com/material-ui/react-select/#with-a-dialog

Screen.Recording.2023-08-11.at.18.49.35.mov

We have another example in https://mui.com/material-ui/react-menu/#menulist-composition that might help with the implementation.

Context 🔦

I have noticed answering #9781 (comment).

It's also related to the design review I had on Joy UI in https://www.notion.so/mui-org/Olivier-design-review-on-Joy-Design-3ada9a7bcfa44b9fab1fe5032dfb33bb?pvs=4#fae949292c7a4eabacd2a377ba13cc86. Are we sure about the current animation? It doesn't feel great on my end. When you go to https://mui.com/x/react-date-pickers/#overview and click on the button, you have to wait for the open animation to complete. However, when you go to https://vercel.com/design/calendar or https://ui.shadcn.com/docs/components/date-picker, the animation is shorter, it feels clearly more responsive.

Your environment 🌎

v6.11.1

Order ID or Support key 💳 (optional)

No response

[LukasTy]

Are we sure that this can be considered a bug?
IMHO, the opening origin is expected and as designed. If we were to open the picker popup on top of text field, that would hide pretty important information.
Let's look at some examples:

• In the linked example the native select is opened on top of the input so that it wouldn't hide the input (i.e. selected value)
• Native date input picker behavior also opens above the input

In regards to the transition speed: isn't it a matter of the Popper or Grow or Fade component to decide?
We are not specifying any custom timeout for the transitions.
If someone wants their transitions to feel snappier, they can provide a shorter timeout for them. But this raised a question for me: am I missing something or do we have no option to override the timeout/duration of all transitions globally? 🤔

[oliviertassinari]

opening origin

@LukasTy I agree with you that the position of the popper is correct in HEAD.

I'm flagging the animation transformation origin that is wrong https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin.

---

In regards to the transition speed: isn't it a matter of the Popper or Grow or Fade component to decide?

In this context, the Popper is only responsible for the position, so no. The Grow and Fade are lower primitives, maybe but not sure. I actually think it would be great to replace them with pure CSS. I have seen cases where they slow things down.

But this raised a question for me: am I missing something or do we have no option to override the timeout/duration of all transitions globally?

I think it's possible to customize it but the problem is with the default behavior.

Now, I think that the Date Picker and Autocomplete, Select, Data Grid panels should use the same higher level abstraction. The Select uses Popover which could be that abstraction, but we need to rewrite it from scratch.

cc @michaldudak who worked a bit on this recently.