shadcn dropdown menu
Answered
Pacific sand lance posted this in #help-forum
Pacific sand lanceOP
I’m using the shadcn dropdown menu in Next 14. I’ve created a menu using the components from shadcn. This menu component is using the “use client†directive at the top.
It is working as expected when I use the component on a server page. However, if I use the component on a page, or in another component, I’ve marked with the “use client†directive, the menu’s content no longer opens.
Has anyone encountered this issue or have any suggestions on how I could resolve this issue or troubleshoot further?
It is working as expected when I use the component on a server page. However, if I use the component on a page, or in another component, I’ve marked with the “use client†directive, the menu’s content no longer opens.
Has anyone encountered this issue or have any suggestions on how I could resolve this issue or troubleshoot further?
Answered by Southern rough shrimp
Remove the Button tag inside the trigger and test it by clicking the text
8 Replies
Pacific sand lanceOP
Here some screenshots of what I’m testing. The contents of the shadcn are mostly unchanged other than a different icon library and I added “use client†and removed the radio and checkbox elements.
Southern rough shrimp
Remove the Button tag inside the trigger and test it by clicking the text
Answer
Southern rough shrimp
What might be happening is the button is absorbing the onClick handle meaning the trigger is never triggered
So technically you’re just clicking an empty button
https://ui.shadcn.com/docs/components/dropdown-menu here’s the reference, see that they don’t have any button
@Southern rough shrimp Remove the Button tag inside the trigger and test it by clicking the text
Pacific sand lanceOP
Thank you! The button was causing issues with it. It works if I make it text within a span element or, if I remove the asChild prop from the trigger, it also seems to work.
Southern rough shrimp
No worries, could you mark the solution ðŸ‘