[BUG] - DropdownMenu not visible when clicking it

[FredM7]

HeroUI Version

2.8.0-beta.2

Describe the bug

Hi yall!

I am trying to use the Dropdown and running into an issue where the dropdown's menu is not appearing. Right now, I'm not sure if this is affecting ANY other components - I have not tried any other components yet.

But for now, the Dropdown is an issue for me, with my setup.

Please see here:

In the above image, I have clicked on the dropdown trigger, and to me it appears like the opacity of the dropdown menu is not changing in my setup.

If I proceed to manually update this opacity in the elements in the browser, it appears:

You should be able to see all the versions I am using in the package.json file, and the project should run fine! (Please see steps to run my project & reproduce the issue)

I am using the latest versions as indicated from the documentation over here: https://www.heroui.com/docs/guide/tailwind-v4

My setup - latest versions of:

• heroui
• typescript
• tailwindcss
• webpack,
• and react

Any help regarding this will greatly be appreciated! As right now this is a blocker for me, and preventing me from successfully using HeroUI...

Please let me know if I can elaborate more on anything else as well to clarify.

Your Example Website or App

https://github.com/doshexchnage/nextui-testing/tree/latest

Steps to Reproduce the Bug or Issue

Steps to run project:

1. git clone my project above.
2. bun install OR npm install
3. bun run local OR npm run local

Steps to reproduce:

1. Once the project is running, visit http://localhost:8001
2. You will see a bordered dropdown "Open Menu".
3. Click on the dropdown.
4. The dropdown's opacity is not changing such that I can see it.
5. I can still click on the "invisible area" and it will then select items, they are just not visible...

Expected behavior

As a user, when I click on the dropdown, I expect the dropdown's opacity to become visible and not stay hidden.

Screenshots or Videos

https://github.com/user-attachments/assets/32a34c10-0848-4f95-a961-259bd9d797fc

Operating System Version

Arch Linux, Kernel 6.14.2

Browser

Chrome

[linear[bot]]

ENG-2470 [BUG] - DropdownMenu not visible when clicking it

[FredM7]

Upon further investigation, I came to the conclusion that it must be framer-motion related.

I have installed this specific version of Framer Motion:

• 5.5.6-beta.0 which is marked as beta

And now it "appears" to work fine again. I don't feel like this is the correct solution tho? Perhaps its an indication to a another/deeper issue? I'll continue to investigate...

[wingkwong]

We plan to upgrade framer-motion to motion (v12) in 2.8.0. The PR hasn't merged yet so in beta branch it should be using 11.9.0. Therefore, please use the same version at this moment.

[FredM7]

Hmmm I've now installed framer motion 11.9.0

But now my dropdown (or modal) wont work any more again. only 5.5.6-beta.0 appears to work for me so far

[FredM7]

Another update. The latest working (framer-motion) version for me is 7.2.0 exactly. Anything newer seems to be breaking for me, for example, with 7.2.1, the dropdown and modal is not working.

[FredM7]

Update: I noticed i get errors via NPM with the working versions i mentioned above.

npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @heroui/[email protected]
npm error Found: [email protected]
npm error node_modules/framer-motion
npm error   framer-motion@"7.2.0" from the root project

Becuase i use Bun, i did not notice this issue until today 😄 after one of my colleagues tried to to the same thing.

In order for NPM to install it successfully, i had to run:

npm i --legacy-peer-deps
OR
npm i --force

For me on my machine, i can confirm that:

• framer-motion 11.9.0 is not working for me, but yes, i can confirm i see this dependency here: https://github.com/heroui-inc/heroui/blob/canary/packages/components/dropdown/package.json#L65

• I've been able to continue with the 7.2.0 version for now, everything seems to work as expected.

• anything newer, seems to break for me. eg: 7.2.1 wont render dropdowns and other components.

• ill continue to check newer versions one-by-one sometime to see if there are any other working versions

• i do suspect there is something wrong with HeroUI & Framer Motion, becuase it is not just happening on my machine - my colleagues at work also runs into this issue with any other framer motion version 🤔

[FredM7]

Update: I once again tried using framer-motion 11.9.0 as @wingkwong indicated 😄 and then i tried to disable the animation using disableAnimation={true}:

<Dropdown isDisabled={false} disableAnimation={true}>
        <DropdownTrigger>
          <Button variant="bordered">Open Menu</Button>
        </DropdownTrigger>
        <DropdownMenu aria-label="Dynamic Actions" items={items}>
          {(item) => (
            <DropdownItem key={item.key} className={item.key === "delete" ? "text-danger" : ""} color={item.key === "delete" ? "danger" : "default"}>
              {item.label}
            </DropdownItem>
          )}
        </DropdownMenu>
      </Dropdown>

and now my items are showing 👍🏻

narrowing down the issue to animations now.

---

I also notice that all of this is probably related to the Popover's code:

<PopoverProvider value={context}>
      {trigger}
      {context.disableAnimation && context.isOpen ? (
        overlay
      ) : (
        <AnimatePresence>{context.isOpen ? overlay : null}</AnimatePresence>
      )}
    </PopoverProvider>

[antogno]

I have the same issue with Modal, and setting disableAnimation={true} also fixes it for me. Below is a video of the issue:

https://github.com/user-attachments/assets/828ec536-de1e-4941-a40c-86993b7274a8

[FredM7]

The issue started to reappear for me again for some reason, after it worked fine for a few months... the issue only started to reappear for this one control - the Dropdown control - things like Modal, and Select still works!

The behavior right now is that if i build my code then the end result's issue is that Dropdown won't make a selection any longer.

Now, i seem to have to "pin" the package.json versions:

This seems to solve it again for me after a build and hosting it on a server.

---

It still opens:

however when making a selection, it won't make the selection.

I clicked on 200 and nothing happened - the dropdown closed though:

Now, something that is interesting, is that when i open the dropdown, and i use my arrow keys then i seem to be able to make selections by pressing enter as indicated in this video:

https://github.com/user-attachments/assets/357ed4ca-930a-4f20-a800-30e90dbed004

For some odd reason it seems to swallow the onClick or onPress event that is supposed to fire before closing...

[FredM7]

I updated to HeroUI 2.8.0-beta.10 & Framer Motion 12.19.1 and now things seems to be working again...

[FredM7]

Hi @wingkwong reason for closing this? Has it been resolved?

The issue still appears if I remove disableAnimation={true} which imo means its not working 100% as expected yet - at least with our webpack setup, its not working.

Basically, anything that uses the Popover internally has this issue.

Modals, Dropdowns, Tooltips, etc, are affected 🤔

[wingkwong]

I updated to HeroUI 2.8.0-beta.10 & Framer Motion 12.19.1 and now things seems to be working again...

I thought you've confirmed this version has resolved the issue. Could you please update the reproducible repo for us to take a look again?

[FredM7]

@wingkwong sorry for the confusion! I only indicated that it stopped working with disableAnimation, and once i updated to latest HeroUI and latest Framer Motion, it "worked" again with the disableAnimation={true}. However, i would like to enable animations again once it works 😄

I have updated the repository, it's the same link as in my initial post - I'm posting it here again: https://github.com/doshexchnage/nextui-testing/tree/latest

I have added the following controls in an attempt to show multiple controls having this issue:

• Dropdown
• Tooltip
• Modal and yes, the issue still persists unfortunately.

After you cloned the latest code from the above link, run the following:

• npm i
• npm run local

Then you should see this:

If you click on Open Dropdown, hover over Tooltip, and click on Open Modal you will see that they are not opening.

My experience is that the opacity is not changing correctly. I can open the browser's Inspector and hover over the invisible "Popovers" as indicated here: https://github.com/user-attachments/assets/0e1a3eed-1751-4586-9175-7ecadcc93f61

In my code, you can change the disableAnimation values to disableAnimation={true} and that will cause all of the controls to work "correctly" as-in i can see the Dropdown, the Tooltip, and the Modal open correctly without animations:

After disabling the animations, the dropdown, tooltip & modal is appearing when clicking, hovering etc: https://github.com/user-attachments/assets/ef520b71-2657-4e71-9e44-646305c143dc

Let me know if there is anything else i can elaborate on, or anything else i can provide or try out!

Thanks! 🥇

[OlesiaTr]

The issue is still ongoing, disableAnimation={true} helps with flickering and immediate closing, but not resolving it.

[FredM7]

The issue is still ongoing, disableAnimation={true} helps with flickering and immediate closing, but not resolving it.

Interesting @OlesiaTr - I dont have any flickering issues though. Do you mind sharing a short video clip of that, if possible?

For me, the only ongoing issue is the fact that ANYTHING using the Popover in the background, like Select, Dropdown, Modals, etc, they all have the issue of not showing anything unless disableAnimation is set to true.

[OlesiaTr]

@FredM7 all those components that you mentioned are flickering on closing for me, so have to use disableAnimation

https://github.com/user-attachments/assets/4bdd756b-d829-4292-aeb6-614c8089ccce