fix(dropdown): pass children through when render prop is provided (#384)

Author: mattrothenberg

.changeset/fix-dropdown-trigger-children.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+fix(dropdown): pass children through when render prop is provided on DropdownMenu.Trigger

packages/kumo-docs-astro/src/components/demos/DropdownDemo.tsx

@@ -143,6 +143,33 @@ export function DropdownNestedDemo() {
   );
 }
 
+/**
+ * Demonstrates using the render prop with children to compose a custom trigger
+ * that contains other elements. The render prop provides the trigger element,
+ * while children are rendered inside it.
+ */
+export function DropdownAvatarTriggerDemo() {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger
+        render={<button type="button" className="rounded-full" />}
+      >
+        <span className="flex h-8 w-8 items-center justify-center rounded-full bg-kumo-brand text-sm font-medium text-white">
+          MR
+        </span>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>
+        <DropdownMenu.Item icon={GearIcon}>Settings</DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item icon={SignOutIcon} variant="danger">
+          Log out
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+}
+
 /**
  * Demonstrates the new LinkItem component for navigation links.
  * Use LinkItem instead of Item with href for cleaner, more semantic links.

packages/kumo-docs-astro/src/pages/components/dropdown.mdx

@@ -14,6 +14,7 @@ import {
   DropdownBasicDemo,
   DropdownCheckboxDemo,
   DropdownNestedDemo,
+  DropdownAvatarTriggerDemo,
   DropdownLinkItemDemo,
 } from "~/components/demos/DropdownDemo";
 
@@ -96,6 +97,16 @@ export default function Example() {
   <DropdownNestedDemo client:load />
 </ComponentExample>
 
+<Heading level={3}>Custom Trigger with Avatar</Heading>
+<p>
+  Use the `render` prop to customize the trigger element while passing children
+  to render inside it. This is useful when you need a non-button trigger (like
+  an avatar) wrapped in an accessible button element.
+</p>
+<ComponentExample demo="DropdownAvatarTriggerDemo">
+  <DropdownAvatarTriggerDemo client:load />
+</ComponentExample>
+
 <Heading level={3}>Navigation Links</Heading>
 <p>
   Use `DropdownMenu.LinkItem` for menu items that navigate to a URL.

packages/kumo/src/components/dropdown/dropdown.tsx

@@ -425,25 +425,34 @@ DropdownMenuRadioItemIndicator.displayName = "DropdownMenuRadioItemIndicator";
 /**
  * Custom Trigger that converts a single child element to the `render` prop
  * to avoid nested button issues with base-ui's Menu.Trigger.
+ *
+ * When an explicit `render` prop is provided, children are passed through
+ * to the rendered element.
  */
 const DropdownMenuTrigger = React.forwardRef<
   HTMLButtonElement,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
 >(({ children, render, ...props }, ref) => {
-  // If render prop is provided, use it directly
-  // Otherwise, convert single child element to render prop
+  // If render prop is explicitly provided, use it and pass children through
+  if (render) {
+    return (
+      <DropdownMenuPrimitive.Trigger ref={ref} {...props} render={render}>
+        {children}
+      </DropdownMenuPrimitive.Trigger>
+    );
+  }
+
+  // Otherwise, auto-promote single child element to render prop
   const childElement = React.isValidElement(children) ? children : null;
-  const effectiveRender = render ?? childElement;
 
   return (
     <DropdownMenuPrimitive.Trigger
       ref={ref}
       {...props}
-      {...(effectiveRender && {
-        render: effectiveRender as React.ReactElement<Record<string, unknown>>,
+      {...(childElement && {
+        render: childElement as React.ReactElement<Record<string, unknown>>,
       })}
     >
-      {/* Only pass children if not using as render prop */}
       {childElement ? undefined : children}
     </DropdownMenuPrimitive.Trigger>
   );