[BUG] - DropdownMenu animates in wrong direction on first open (auto placement)

[daveycodez]

NextUI Version

2.6.3

Describe the bug

Whenever you open a DropdownMenu that does not have placement set (auto placement) it always animates downwards on the first render, then correctly animates upwards on sequential renders. Even if it is on the bottom of the page and rendering to "top", it will always render downwards first. The only way to fix this is to hardcode placement for the Dropdown, but sometimes you want auto placement if the user is scrolling or on mobile. This is a new issue introduced in 2.6

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

above

Expected behavior

Dropdown menu should always animate in the correct direction it is appearing in

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1661 [BUG] - DropdownMenu animates in wrong direction on first open

[daveycodez]

I did some further testing. This bug only occurs when "placement" prop is omitted. If you set placement="asdfasdfsdaf" to a random string, it is fixed. For now I will just set placement to "auto" even though "auto" isn't a documented or legal value for placement prop

[AnYiEE]

I did some further testing. This bug only occurs when "placement" prop is omitted. If you set placement="asdfasdfsdaf" to a random string, it is fixed. For now I will just set placement to "auto" even though "auto" isn't a documented or legal value for placement prop

This does not solve the problem, the initial animation just changed from "flashing from the top" to "flashing from the automatic position". If the placement is specified as bottom, the same flash can be observed, only the position of the flashing has changed.

[AnYiEE]

The Tooltip and Popover have the same issue. They flicker when opened for the first time. Additionally, when two or more of them exist on the same page, if one is opened, the animation of the others will behave normally.

[AnYiEE]

@wingkwong Sorry to bother you, may I ask if there is any progress? As a UI library focused on aesthetics, this issue should be prioritized just like any non-functional feature. For components like Dropdown, Popover, and Tooltip, when the placement is not specified, the initial animation first displays downward with an interruption before showing again at the correct position. Additionally, for Popover, the direction of the initial animation does not align with the arrow's position on the popover card.

[wingkwong]

@AnYiEE @daveycodez anyone can share a video or a reproducible sandbox on latest version? and is it a desktop or a mobile issue? thanks.

[AnYiEE]

@wingkwong It can be reproduced on both desktop and mobile devices. Sorry, I don't have the minimal reproduction environment at the moment, but I can provide a project branch that can reproduce the issue, and you can reproduce locally. Build this branch locally, then go to the /recipes route, and you will see it by clicking on the card.

[AnYiEE]

@wingkwong This is a screen recording. It shows the first click and the second click.

[ryo-manba]

It seems to work correctly in the Docs.

dropdown-example.mov

[ryo-manba]

@AnYiEE
Sorry, I don't understand the issue with your example.
Isn't that behavior correct because there is enough space below?

[AnYiEE]

@ryo-manba Yes, the examples in the document are normal. But for me, version 2.4 is also normal, and it is true that 2.6 is not. For the first click, the animation is bottom-up, as if the trigger is below the popup, but subsequent clicks are normal.

[AnYiEE]

@ryo-manba In the screen recording, the left side is 2.6, and the right side is 2.4. You can see the difference in the first animation, as well as the difference between the second and first clicks on the same card. The second click will be the same as 2.4.

2024-12-09_14-09-46.mp4

[ryo-manba]

@AnYiEE
Ah, I see now. The animation does look different for a moment when the popup is displayed.
Thank you for clarifying that!

[ryo-manba]

@AnYiEE
It would be helpful if you could briefly share the props of the Dropdown!

[Peterl561]

@ryo-manba here is a codesandbox with what I think is the issue mentioned here. Seems that first popup animation is the default placement animations, regardless of where placement actually is.

[AnYiEE]

@ryo-manba Combined with the reproduction environment provided by @Peterl561, it seems that when displaying the initial animation, the animation starts from the placement instead of the calculated position. For example, in the reproduction environment, placement="right" is specified, but there is no space on the right side, so the content card automatically adjusts to pop out from the left side, but the animation does not change accordingly. For me, I did not specify the placement, and the Popover defaults to popping up, but there is no space above, so the content card can only pop down, yet the initial animation still assumes it is popping up.

[AnYiEE]

At the same time. For me, in version 2.4, I could pass motionProps to these three components like this, motionProps={{initial: {}}}, to use backdrop-filter normally but it doesn't work in 2.6, which also causes flickering in the first animation, and only works normally the second time.

[ryo-manba]

Hey @AnYiEE ,
I've submitted a PR to fix the Dropdown issue.
Since you're using a Popover, could you create a separate issue for it? That would be really helpful.

[AnYiEE]

Could you create a separate issue for it? That would be really helpful.

@ryo-manba As a member, you should have the permission to directly separate other new issues from this issue?

And from the sandbox above, it can be seen that the Popover has the same issue. I think changing the title of this issue to [BUG] - Popover-based components animate in the wrong direction on first open (auto placement) would be appropriate, and it can be closed with a PR, rather than just partially resolving it through #4288. The issues with these three components may have similar causes.