[BUG] - Dropdown component, DropdownMenu not render perfectly

[simpleneeraj]

NextUI Version

2.2.9

Describe the bug

I've integrated the Dropdown component from Next UI using the code provided in the documentation: Component Link → https://nextui.org/docs/components/dropdown. However, within my code, the dropdown menu isn't positioning correctly.

Please review this code,

function DropdownButton() {
  return (
    <Dropdown>
      <DropdownTrigger>
        <UIIconButton>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={2}
            stroke="currentColor"
            className="w-6 h-6"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
            />
          </svg>
        </UIIconButton>
      </DropdownTrigger>
      <DropdownMenu variant="faded" aria-label="Dropdown menu with description">
        <DropdownSection title="Actions" showDivider>
          <DropdownItem key="new" shortcut="⌘N" description="Create a new file">
            New file
          </DropdownItem>
          <DropdownItem
            key="copy"
            shortcut="⌘C"
            description="Copy the file link"
          >
            Copy link
          </DropdownItem>
          <DropdownItem
            key="edit"
            shortcut="⌘⇧E"
            description="Allows you to edit the file"
          >
            Edit file
          </DropdownItem>
        </DropdownSection>
        <DropdownSection title="Danger zone">
          <DropdownItem
            key="delete"
            className="text-danger"
            color="danger"
            shortcut="⌘⇧D"
            description="Permanently delete the file"
          >
            Delete file
          </DropdownItem>
        </DropdownSection>
      </DropdownMenu>
    </Dropdown>
  );
}

Next UI website screenshot

My webapp screenshot

My main issue position of dropdown

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Setup

Create a new Next.js project or use an existing one. Install the nextui package: npm install nextui

2. Integrate the Dropdown component:

Use the code provided in the Next UI documentation for the Dropdown component: https://nextui.org/docs/components/dropdown Ensure you replace the "content" prop with your desired dropdown content (e.g., list items, buttons).

3. Trigger the dropdown:

Add the component to your JSX code wherever you want the dropdown to appear. Ensure the component has a proper trigger element, such as a button or text link.

4. Observe the bug:

Click over the trigger element (e.g., button) to activate the dropdown. Observe how the dropdown menu is positioned.

Expected behavior

dropdown menu should be positioned correctly

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/69778720/c7a5687c-9ed5-442a-a3a9-c5f9101952b5

Operating System Version

Windows 10

Browser

Chrome

[kursat]

I had the same problem, I think its related to next.js server/client rendering feature.

Fixed mine by extracting Popoever to a new component using 'use client'; directive. Also you may need to run rm -rf .next occasionally.

[jeanchirinos]

Your UIIconButton component must receive ref in order to work or, you can use the default NextUi Button Component or any tag like a normal <button>. Your UIIconButton component must be something like this to work as expected:

// UIIconButton.tsx
import { forwardRef } from 'react'

type Props = React.ComponentProps<'button'>

export const UIIconButton = forwardRef<HTMLButtonElement, Props>(function UIIconButton(props, ref) {
  return <button {...props} ref={ref} />
})