Dropdown dismiss on click only works the first time

[stuart-williams]

Describe the bug
Dropdown dismiss on click only works the first time the dropdown menu is opened

To Reproduce

1. Trigger drop down
2. Clicking an item dismisses the menu as expected
3. Trigger dropdown a second time
4. Clicking an item does not dismiss the menu

Expected behavior
Clicking a dropdown menu item dismisses the menu consistently

Screenshots

Screen.Recording.2023-06-03.at.11.21.02.mov

System information:

• Device: Mac
• Resolution:
• OS: Monterey
• Browser: Chrome
• Version: 114.0.5735.90

Project information:

• Tailwind: 3.0.0
• Flowbite: 1.4.7
• Flowbite React: 0.1.2
• Type: CRA

Additional context
Add any other context about the problem here.

[nbsp1221]

Same problem for me. I think the cause of this issue is in Dropdown.tsx.

flowbite-react/src/components/Dropdown/Dropdown.tsx

Lines 92 to 95 in 35e7f5b

	onClick: () => {
	node.props.onClick?.();
	dismissOnClick && setCloseRequestKey(id);
	},

flowbite-react/src/components/Dropdown/Dropdown.tsx

Line 63 in 35e7f5b

const id = useId();

In order to dismiss the menu, setCloseRequestKey should be called with random id value. However, useId hook does not return a random value every time you click items.

When I replaced the useId hook with a random string generator as shown above, it worked fine.

I hope this information helps to resolve the issue.

[tulup-conner]

@nbsp1221 Thank you for catching that! I specifically undid that change and did not realize this is a thing that happens. That is my bad.

If someone wants to make a PR - please do! It should be as simple as doing exactly what @nbsp1221 did here, or something simpler to understand like, Math.random().toString(8).

My guess is that useId is supposed to work with React Server Components, but we're forcing use client for all of our components and breaking that behavior. That is likely the core issue, which we can and will resolve in the future, at which point we can use useId for its intended purpose here. See the second "pitfall" noted in https://react.dev/reference/react/useId#usage

[tulup-conner]

This is a duplicate of #625 but I didn't realize that and the proposed solution provided here is great so we can keep the discussion here.

[mansgori]

@tulup-conner Hi, I understand the problem. I want to working on this problem. can you assign to me?

[rluders]

@nigellima are you working on this one? I noticed that you created a commit with a reference to this task. :)

[nigellima]

@nigellima are you working on this one? I noticed that you created a commit with a reference to this task. :)

Hey, yes. It's still in my local environment. But that commit in specific I will drop it, because I'm actually working on the #648 , which will solve this and some other issues related to the Dropdown component

[rluders]

@nigellima all right. Thanks, I'll be waiting for your the PR. Valeu, jovem. :)