[BUG] - Dropdown Menu turns off automatically

[fundon]

Describe the bug

The dropdown menu is not behaving correctly, it opens and closes automatically.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Open the https://nextui.org/.
2. click the dropdown button.

Expected behavior

Click the button then open the dropdown menu.

Screenshots or Videos

https://user-images.githubusercontent.com/27926/182021621-dae2f214-e4f6-4f89-b6e3-49d54374dff4.mov

Operating System Version

macOS

Browser

Firefox/Chrome

[ahmad1702]

I second this. I tested this on Windows, Mac, and Linux. The issue does not happen on IOS safari though, just web apps.

[fundon]

I tested on macOS, Firefox, Chrome, Safari, doesn't work properly on all three browsers.

But popover works right. 🤔

So I will first go to popover for development.

[Ryannnkl]

https://user-images.githubusercontent.com/48577990/182159517-1d6890f9-8b22-4bb1-a321-09c473b26add.mp4

does it work like this?

• when the dropdown appeared it was because I held down the mouse button.

but last time it showed up because i just clicked

[znareak]

I have the same problem :(

[fundon]

does it work like this?

Right, not consistent with expected behavior.

The correct behavior is to click once, release the mouse and then pop up the menu.

[devaaravmishra]

Yeah i also faced the issue, but Dropdown works fine in smaller widths & browser's responsive view.

[jrgarciadev]

Hi guys, could you please try again? 🙌🏻

[fundon]

Its working.

How to fix that?

[jrgarciadev]

It was a cache issue in the docs app deployment, It was not a Dropdown issue 👍🏻

[ahmad1702]

Its working now, great job guys, love the work you guys have been doing so far

[devaaravmishra]

How to fix the issue, I am using Dropdown in production build and tried deploying several times since the issue has been closed.

[fundon]

But in my local environment, the problem has always been there, whether in development mode or production mode.

[devaaravmishra]

But in my local environment, the problem has always been there, whether in development mode or production mode.

It's strange I didn't faced the issue locally at all Only in production build.

[tianenpang]

Hi @aaaravv @fundon could you please share a full repro case?

[fundon]

Hi @tianenpang @aaaravv, I created a small case https://github.com/fundon/yarn-npm-test.

When building with yarn, the above problem is encountered.

1. yarn, the issue happens

yarn
yarn start

2. npm, it's fine

git checkout npm
npm i
npm start

[tianenpang]

@fundon thank you for the repro.

I'm able to reproduce the issue with yarn, will look into this 🤔

[fundon]

You can remove the yarn-lock or package-lock files, Try again.

[devaaravmishra]

Hi @tianenpang @aaaravv, I created a small case https://github.com/fundon/yarn-npm-test.

When building with yarn, the above problem is encountered.

1. yarn, the issue happens

yarn
yarn start

2. npm, it's fine

git checkout npm
npm i
npm start

Hey @fundon @tianenpang exactly the issue occurs only when

Installing and building package via yarn

yarn install
yarn run build
serve -s build

Tried locally via npm it's working fine but on deploying production build upon Vercel via yarn this issue can be reproduced.

[hectormanueljsx]

Hello, I am using the library, but it shows the following warning, when the dropdown is pressed it has strange behavior

[neelspansare]

Dropdown flickers for me, It's still happening on my local server. I am using "@nextui-org/react": "^1.0.0-beta.9"

https://user-images.githubusercontent.com/71687022/183065630-43b4f2bd-fdd7-4f80-ad84-03d1cfc634e4.mov

[mikael1995]

Выпадающий список мерцает для меня, это все еще происходит на моем локальном сервере. Я использую "@nextui-org/react": "^1.0.0-beta.9"

Экран.Запись.2022-08-05.в.4.31.56.PM.mov

I have same problem... what is the reason ?((

[buskerone]

Same issue here, but I can't see it happening in the example of the official docs.

[mikael1995]

ice_video_20220806-114625.webm

[tianenpang]

Hi guys, thanks for the feedback.

For the warning that onClick is deprecated, please use onPress it may be related to the Button.

• https://github.com/nextui-org/nextui/issues/482

For the flickering issue please try to downgrade react and react-dom to 17.0.2.

• https://github.com/nextui-org/nextui/discussions/565

It would be better to create different issues 🙌🏻

[mikael1995]

will there be animation support for version 18?

[buskerone]

Regarding the main issue that @fundon reported, I already tried to downgrade react and react-dom to 17.0.2 but no luck at all, the problem persist. The animation glitch disappears, but this doesn't fix the bug reported in this thread.

[JabirDev]

Regarding the main issue that @fundon reported, I already tried to downgrade react and react-dom to 17.0.2 but no luck at all, the problem persist. The animation glitch disappears, but this doesn't fix the bug reported in this thread.

1. Remove the node_modules folder
2. Install using npm install

[lqd1434]

I have the same problem, and when I change the trigger to "longPress" ,it work fine, it is so strange, haha.

[buskerone]

Regarding the main issue that @fundon reported, I already tried to downgrade react and react-dom to 17.0.2 but no luck at all, the problem persist. The animation glitch disappears, but this doesn't fix the bug reported in this thread.

1. Remove the node_modules folder
2. Install using npm install

it's not an option for our team to use npm. :( do you know exactly why does it work with npm instead of yarn?

[tianenpang]

Hi all, I'm still looking for this strange issue, currently using npm or pnpm will work as expected.

Hey @buskerone The Dropdown in the docs works is because the @nextui-org/react is compiled and imported directly from the packages/react in monorepo.

The issue is only with yarn add 🤔