Skip to content

fix(combobox): open panel on chevron click (x-combobox + x-multi-combobox)#268

Merged
avanelsas merged 1 commit into
avanelsas:mainfrom
pyze:fix/combobox-chevron-click
Jun 17, 2026
Merged

fix(combobox): open panel on chevron click (x-combobox + x-multi-combobox)#268
avanelsas merged 1 commit into
avanelsas:mainfrom
pyze:fix/combobox-chevron-click

Conversation

@markaddleman

Copy link
Copy Markdown
Contributor

Problem

Clicking the dropdown arrow (chevron) on x-multi-combobox (and x-combobox) is a no-op. Users expect it to open the panel, just like clicking the input area does.

Fixes #267.

Root cause

The chevron already has a pointerdown listener wired up that toggles the panel:

(defn- on-chevron-pointerdown [^js el ^js evt]
  (.preventDefault evt)
  (if (du/has-attr? el model/attr-open)
    (close-panel! el ...)
    (do (open-panel! el ...) ...)))

…but the chevron's CSS set pointer-events:none, so the chevron was never the target of a pointerdown — pointer events passed straight through it and the handler was dead code. The pointer fell through to the wrapper, which has no handler, so nothing happened. Clicking "to the left" worked only because that region is the actual <input>, whose native focus event opens the panel.

Fix

Remove pointer-events:none from the [part=chevron] rule in both components, and add cursor:pointer for affordance. The handler, preventDefault, and open/close toggle were already correct — they just needed the chevron to be hit-testable.

Scope

I audited every chevron/arrow/trigger-bearing component. These two are the only ones affected: in both, the chevron carries its own click handler while the rest of the control is a text input (no parent button to catch a fall-through click). Everywhere else (x-dropdown, x-date-picker, x-select, x-popover, x-tooltip, …) the chevron either sits inside a <button>/native <select> that handles the click, or pointer-events:none is on a decorative arrow triangle or a disabled state — all correct.

Tests

Added two regression tests per component:

  • chevron-is-hit-testable-test — asserts the chevron's computed pointer-events is not "none". This is the test that actually guards the bug: a synthetic dispatchEvent bypasses CSS hit-testing, so only the computed style catches it.
  • chevron-pointerdown-toggles-open-test — documents the handler contract (open on first pointerdown, close on second).

Full suite: 5100 tests pass headless (npm test); clj-kondo clean.

🤖 Generated with Claude Code

The chevron in x-combobox and x-multi-combobox carries a `pointerdown`
listener that toggles the panel, but its CSS set `pointer-events:none`,
so real clicks fell straight through and the handler was dead code.
Clicking the arrow was a no-op; only the input area opened the panel.

Remove `pointer-events:none` from the `[part=chevron]` rule (and add
`cursor:pointer` for affordance) in both components. The handler,
preventDefault, and open/close toggle were already correct.

These are the only two affected components: elsewhere the chevron either
sits inside a <button>/native <select> that handles the click, or the
pointer-events:none is on a decorative arrow/disabled state.

Adds regression tests asserting the chevron's computed pointer-events is
not "none" (a synthetic dispatchEvent bypasses hit-testing, so the
computed style is what actually guards the bug) plus a pointerdown
toggle test.

Fixes avanelsas#267

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@avanelsas

Copy link
Copy Markdown
Owner

@markaddleman thanks for finding and fixing this! Approved and merged

@avanelsas avanelsas merged commit 0994b1a into avanelsas:main Jun 17, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

x-multi-combobox does not expand on arrow click

2 participants