[BUG] - DropdownTrigger not working with Badge + Button

[dubdia]

NextUI Version

2.3.6

Describe the bug

First: I realy love to use NextUI! Thanks for that!

I think i found a bug in the dropdown.

<Dropdown backdrop="blur">
      <DropdownTrigger>
        <Badge content={list.length} color="default" showOutline={false}>
             <Button>
                <FaStar></FaStar>
             </Button>
        </Badge>
      </DropdownTrigger>
      <DropdownMenu>
          ...
      </DropdownMenu>
    </Dropdown>

The Button is not working in the DropdownTrigger when the Badge is in-between.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

.

Expected behavior

The Dropdown should open but its not working when Button is in Badge

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear[bot]]

ENG-873 [BUG] - DropdownTrigger not working with Badge + Button

[KumJungMin]

I think, the dropdown trigger is sets only interactive elment(such as button or a)

https://github.com/nextui-org/nextui/blob/5194a02d8293b21014280cd98b0d4478dd45c7b0/packages/components/dropdown/src/dropdown-trigger.tsx#L11

dropdown-trigger.tsx

[alphaxek]

@dubdia, it takes badge as its trigger

Solution: Wrap the Badge component to DropdownTrigger

import React from "react";
import {
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem,
  Button,
  Badge,
} from "@nextui-org/react";

export default function App() {
  return (
    <Dropdown>
      <Badge content="5" color="primary">
        <DropdownTrigger>
          <Button variant="bordered">Open Menu</Button>
        </DropdownTrigger>
      </Badge>
      <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>
  );
}