fix(docs): use onClick instead of onSelect on DropdownMenu.Item by mattrothenberg · Pull Request #467 · cloudflare/kumo

mattrothenberg · 2026-05-01T15:07:00Z

Summary

Fix incorrect onSelect → onClick on DropdownMenu.Item in CloudflareLogoDemo.tsx. DropdownMenu.Item does not have an onSelect prop — the only explicitly typed click handler from Base UI's MenuItem is onClick. onSelect only appeared to work because it's a native DOM event (GlobalEventHandlers.onselect) that React passes through to the underlying <div>.
Add DropdownOnClickDemo to the canonical Dropdown demos showing the correct onClick pattern, so AI agents and developers have a clear reference.
Fix registry codegen demo lookup to fall back to PascalCase directory name when the component export name differs from the demo file name (e.g. DropdownMenu vs Dropdown). This was silently dropping all 6 Dropdown demos from the AI registry.

Details

The CloudflareLogoDemo used onSelect on 4 DropdownMenu.Item instances. Since that demo feeds into the registry codegen pipeline, the bad pattern propagated into component-registry.md and component-registry.json — the files AI agents consume for API guidance.

The registry codegen also had a name mismatch bug: demo metadata keys are derived from filenames (DropdownDemo.tsx → "Dropdown") but the registry looks up by component export name ("DropdownMenu"). The fallback to toPascalCase(config.dirName) fixes this for all affected components.

Reviews
- bonk has reviewed the change
- automated review not possible because: involves codegen pipeline behavior and demo correctness verification
Tests
- Additional testing not necessary because: verified by running codegen:registry --no-cache and confirming DropdownMenu examples went from 0 → 6, all onSelect on dropdown items removed from registry output

DropdownMenu.Item does not have an onSelect prop — the only explicitly typed click handler from Base UI's MenuItem is onClick. onSelect only appeared to work because it's a native DOM event that React passes through to the underlying div. The CloudflareLogo demo used onSelect on 4 dropdown items, which propagated into component-registry.md and component-registry.json — the files AI agents consume for API guidance. Changes: - Fix onSelect → onClick in CloudflareLogoDemo - Add DropdownOnClickDemo showing the correct onClick pattern - Fix registry codegen to fall back to dir-name-based demo lookup when component export name differs from demo file name (e.g. DropdownMenu vs Dropdown), restoring 6 missing examples

mattrothenberg · 2026-05-01T15:07:35Z

/bonk

ask-bonk · 2026-05-01T15:08:43Z

PR #467 Summary

Title: fix(docs): use onClick instead of onSelect on DropdownMenu.Item

What Changed

This PR fixes three interconnected issues with the DropdownMenu component documentation and registry:

1. Fixed incorrect prop usage (CloudflareLogoDemo.tsx)

Changed onSelect → onClick on 4 DropdownMenu.Item instances
onSelect is not a valid prop on DropdownMenu.Item; it only appeared to work because it's a native DOM event that React passes through to the underlying <div>
The correct handler from Base UI's MenuItem is onClick

2. Added canonical demo example (DropdownDemo.tsx)

New DropdownOnClickDemo() showing the correct onClick pattern with JSDoc explaining usage
This serves as a reference for AI agents and developers

3. Fixed registry codegen lookup bug (component-registry/index.ts)

Demo metadata keys come from filenames (DropdownDemo.tsx → "Dropdown")
Registry was looking up by component export name ("DropdownMenu") causing a mismatch
Added fallback to toPascalCase(config.dirName) when component name lookup fails
Impact: Restored 6 missing Dropdown demos to the AI registry (went from 0 → 6 examples)

Files Changed

.changeset/fix-dropdown-onclick.md - Changeset entry
packages/kumo-docs-astro/src/components/demos/CloudflareLogoDemo.tsx - Fixed prop usage
packages/kumo-docs-astro/src/components/demos/DropdownDemo.tsx - Added new demo
packages/kumo/scripts/component-registry/index.ts - Fixed lookup logic

Verification

The fix was verified by running codegen:registry --no-cache and confirming:

All onSelect references on dropdown items removed from registry output
DropdownMenu examples increased from 0 to 6

github run

pkg-pr-new · 2026-05-01T15:09:30Z

npm i https://pkg.pr.new/@cloudflare/kumo@467

commit: 8e7f13d

github-actions · 2026-05-01T15:10:36Z

Docs Preview

View docs preview

Commit: 710ddd1

github-actions · 2026-05-01T15:13:26Z

Visual Regression Report — 5 changed, 33 unchanged

5 screenshot(s) with visual changes:

Button / Loading State

5 px (0%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Without Label

105 px (0.1%) changed

Before	After	Diff

Select / Select With Field

635 px (0.54%) changed

Before	After	Diff

Select (Open)

538 px (0%) changed

Before	After	Diff

33 screenshot(s) unchanged

Button / Basic
Button / Variant: Primary
Button / Variant: Secondary
Button / Variant: Ghost
Button / Variant: Destructive
Button / Variant: Outline
Button / Variant: Secondary Destructive
Button / Sizes
Button / With Icon
Button / Icon Only
Button / Disabled State
Button / Title
Button / Link as Button
Dialog / Dialog With Actions
Dialog / Dialog Basic
Dialog / Dialog Alert
Dialog / Dialog Confirmation
Dialog / Dialog With Select
Dialog / Dialog With Combobox
Dialog / Dialog With Dropdown
Select / Select Basic
Select / Select Sizes
Select / Select Placeholder
Select / Select With Tooltip
Select / Select Custom Rendering
Select / Select Loading
Select / Select Multiple
Select / Select Complex
Select / Select Disabled Options
Select / Select Disabled Items
Select / Select Grouped
Select / Select Grouped With Disabled
Select / Select Long List

Generated by Kumo Visual Regression

mattrothenberg · 2026-05-01T15:15:04Z

/bonk can you approve the PR too?

…sage example

ask-bonk · 2026-05-01T15:20:43Z

UnknownError: ProviderInitError

github run

ask-bonk · 2026-05-01T15:20:45Z

@mattrothenberg Bonk workflow failed. Check the logs for details.

View workflow run · To retry, trigger Bonk again.

…PONENT_PROPS The sub-component props extraction regex can't handle React.forwardRef with inline intersection types, which is how all DropdownMenu sub-components are defined. Add manual prop definitions for Item, LinkItem, Content, SubTrigger, CheckboxItem, RadioGroup, RadioItem, and Label — verified against Base UI type definitions.

mattrothenberg · 2026-05-01T15:33:14Z

/bonk approve please

ask-bonk

LGTM! This PR addresses three important issues:

Corrects invalid prop usage - Changing to on is the right fix since is not an explicitly typed prop on the Base UI MenuItem component.
Adds canonical demo - The new provides a clear reference pattern for developers and AI agents.
Fixes registry codegen bug - The fallback to properly handles the name mismatch between demo filenames and component export names, restoring 6 Dropdown demos to the AI registry.

The changeset is included, and the verification steps confirm the fix works as expected.

ask-bonk

LGTM! This PR addresses three important issues:

Corrects invalid prop usage - Changing onSelect to onClick on DropdownMenu.Item is the right fix since onSelect is not an explicitly typed prop on the Base UI MenuItem component.
Adds canonical demo - The new DropdownOnClickDemo provides a clear reference pattern for developers and AI agents.
Fixes registry codegen bug - The fallback to toPascalCase(config.dirName) properly handles the name mismatch between demo filenames and component export names, restoring 6 Dropdown demos to the AI registry.

The changeset is included, and the verification steps confirm the fix works as expected.

ask-bonk · 2026-05-01T15:34:14Z

✅ Approved PR #467

The PR has been approved. Here's a summary of what was reviewed:

Aspect	Status
Prop fix (`onSelect` → `onClick`)	✅ Correct - `onSelect` was never a valid prop on `DropdownMenu.Item`
New demo example	✅ Good - Provides canonical reference pattern
Registry codegen fix	✅ Critical - Restores 6 missing Dropdown demos to AI registry
Changeset included	✅ Yes
Visual regression	✅ Minor noise on unrelated components (flaky)

github run

mattrothenberg added 2 commits May 1, 2026 10:55

chore: add changeset for registry codegen fix

e383540

fix(docs): add DropdownOnClickDemo to docs page and show onClick in u…

f09e18d

…sage example

ask-bonk Bot approved these changes May 1, 2026

View reviewed changes

docs(dropdown): add inset demo showing text alignment with icon items

8e7f13d

mattrothenberg merged commit 40491c2 into main May 1, 2026
16 checks passed

mattrothenberg deleted the fix/dropdown-onclick-not-onselect branch May 1, 2026 16:12

Conversation

mattrothenberg commented May 1, 2026

Summary

Details

Uh oh!

mattrothenberg commented May 1, 2026

Uh oh!

ask-bonk Bot commented May 1, 2026

PR #467 Summary

What Changed

Files Changed

Verification

Uh oh!

pkg-pr-new Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docs Preview

Uh oh!

github-actions Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Button / Loading State

Dialog (Open)

Select / Select Without Label

Select / Select With Field

Select (Open)

Uh oh!

mattrothenberg commented May 1, 2026

Uh oh!

ask-bonk Bot commented May 1, 2026

Uh oh!

ask-bonk Bot commented May 1, 2026

Uh oh!

mattrothenberg commented May 1, 2026

Uh oh!

ask-bonk Bot left a comment

Choose a reason for hiding this comment

Uh oh!

ask-bonk Bot left a comment

Choose a reason for hiding this comment

Uh oh!

ask-bonk Bot commented May 1, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

pkg-pr-new Bot commented May 1, 2026 •

edited

Loading

github-actions Bot commented May 1, 2026 •

edited

Loading

github-actions Bot commented May 1, 2026 •

edited

Loading