fix(combobox): make TriggerInput caret button clickable

[mattrothenberg]

Summary

• Fix Combobox.TriggerInput trigger button having 0x0 dimensions, making it unclickable in Playwright tests
• Add browser tests for Combobox Playwright interactions

Problem

The trigger button (caret icon) in Combobox.TriggerInput had p-0 with its icon child absolutely positioned relative to the outer wrapper. This caused the button to collapse to 0x0 pixels, making it impossible to click programmatically.

Scott Gardner reported this issue - he couldn't locate a clickable trigger when writing Playwright tests.

Solution

Move the absolute positioning from the inner <ComboboxBase.Icon> to the <ComboboxBase.Trigger> button itself. The button now wraps the icon and has a proper 16x16 clickable area.

Keep m-0 bg-transparent p-0 to reset Stratus global button styles (as used elsewhere, e.g., Table).

Bonk

• automated review not possible because: this is a CSS/styling fix with no logic changes

Tests

• Tests included/updated

Added combobox.browser.test.tsx with 9 browser tests covering Playwright interactions including trigger button clicking.

[pkg-pr-new]

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

commit: f97fe9e

[github-actions]

Docs Preview

View docs preview

Commit: c30d57d

[github-actions]

Visual Regression Report

6 screenshot(s) with visual changes:

Combobox / Combobox Sizes

1,605 px (1.45%) changed

Before	After	Diff

Combobox / Combobox Searchable Inside

491 px (0.48%) changed

Before	After	Diff

Combobox / Combobox Grouped

584 px (0.58%) changed

Before	After	Diff

Combobox / Combobox Disabled

112 px (0.11%) changed

Before	After	Diff

Combobox / Combobox Error

1,215 px (1.03%) changed

Before	After	Diff

Combobox (Open)

336 px (0%) changed

Before	After	Diff

4 screenshot(s) unchanged

• Combobox / Combobox
• Combobox / Combobox Sizes Searchable Inside
• Combobox / Combobox Multiple
• Combobox / Combobox With Field

---

Generated by Kumo Visual Regression

[geoquant]

/bonk review

[ask-bonk]

Review for PR #387

I've reviewed the changes. Here's my assessment:

Summary

This PR fixes a real usability issue where the Combobox.TriggerInput caret button was unclickable in Playwright tests due to collapsing to 0x0 dimensions.

Code Changes

combobox.tsx - The fix is clean and minimal:

• Moves absolute positioning from ComboboxBase.Icon to ComboboxBase.Trigger itself
• Maintains m-0 bg-transparent p-0 for Stratus global button style resets
• The button now properly wraps the icon with a 16x16 clickable area

combobox.browser.test.tsx - Excellent comprehensive test coverage:

• 9 browser tests covering Playwright interactions
• Tests for input clicking, focusing, typing, option selection
• Specific tests for trigger button accessibility via various locator patterns
• Tests documenting the issue and verifying the fix

.changeset/fix-combobox-trigger.md - Proper changeset for a patch release

Visual Regression

The VR report shows 6 screenshots with minor pixel changes (~0.5-1.5%), all related to Combobox components. These are expected given the positioning change. The diffs look reasonable.

Approval

✅ Approve - This is a well-scoped fix with good test coverage. The solution is minimal and follows existing patterns in the codebase (similar to Table's button reset approach).

One minor observation: Test at line 210 is titled "trigger button has zero size due to p-0" which describes the bug being fixed, but the test itself just verifies the button exists and logs dimensions. Consider renaming it to something like "trigger button is accessible and clickable" to better reflect its purpose post-fix.

github run