[BUG] - Dropdown with Custom Button is not displayed at the right place

[ziracmo]

NextUI Version

2.2.0

Describe the bug

Using NextJs and NextUI with the follow versions:

• Next: 14.2.1
• NextUI

I'm trying to extend NextUI's Button to create a custom one. However, this custom button will open the NextUi Dropdown but will be placed bellow the footer's page.

Example

custom-button.tsx

"use client";

import { Button, ButtonProps } from "@nextui-org/button";
import { extendVariants } from "@nextui-org/system";
import { useMemo } from "react";

export const MyCustomButton = (props: ButtonProps) => {
  const MyButton = useMemo(
    () =>
      extendVariants(Button, {
        variants: {
          color: {
            danger: "bg-blue-500 text-white",
          },
        },
      }),
    []
  );
  return <MyButton {...props} />;
};

page.tsx

"use client";

import {
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownTrigger,
} from "@nextui-org/dropdown";
import { MyCustomButton } from "@/components/custom-button";
import { Button } from "@nextui-org/button";

export default function Home() {
  return (
    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
      {/* THIS DOES NOT WORK */}
      <Dropdown>
        <DropdownTrigger>
          <MyCustomButton color="danger">Custom Button</MyCustomButton>
        </DropdownTrigger>
        <DropdownMenu>
          <DropdownItem>Edit</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      {/* THIS WORKS */}
      <Dropdown>
        <DropdownTrigger>
          <Button variant="bordered">Open Menu</Button>
        </DropdownTrigger>
        <DropdownMenu aria-label="Static Actions">
          <DropdownItem key="new">New file</DropdownItem>
          <DropdownItem key="copy">Copy link</DropdownItem>
          <DropdownItem key="edit">Edit file</DropdownItem>
          <DropdownItem key="delete" className="text-danger" color="danger">
            Delete file
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </section>
  );
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create an application with NextUI CLI
2. Add the Dropdown package to the project
3. Create the custom button with the given code
4. Use the custom button as a Dropdown trigger
5. Click on it

Expected behavior

Open the dropdown below the button, and not bellow the page footer.

Screenshots or Videos

screencast-localhost_3000-2024.04.19-11_48_53.webm

Operating System Version

MacOS 14.4.1

Browser

Chrome

[linear[bot]]

ENG-685 [BUG] - Dropdown Custom Button does not display on

[wingkwong]

@ziracmo The position is off probably due to missing ref. Try forwardRef on your custom button.

[ziracmo]

Thank you @wingkwong. This is working with the following code:

export const MyCustomButton = forwardRef((props: ButtonProps, ref) => {
  const MyButton = useMemo(
    () =>
      extendVariants(Button, {
        variants: {
          color: {
            danger: "bg-blue-500 text-white",
          },
        },
      }),
    []
  );
  return <MyButton {...props} ref={ref} />;
});

Could this be something mentioned in the documentation?

[wingkwong]

@ziracmo I think that page is focusing on Variants. If you look at the custom implementation in button (ref: link), you can see the example using forwardRef.