From 693986843756bfa7c159a5947764861fbfb3562a Mon Sep 17 00:00:00 2001
From: markaddleman <mark@pyze.com>
Date: Thu, 11 Jun 2026 20:25:44 -0500
Subject: [PATCH] fix(combobox): open panel on chevron click

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 #267

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/x_combobox/x_combobox.cljs     |  2 +-
 .../x_multi_combobox/x_multi_combobox.cljs    |  2 +-
 .../x_combobox/x_combobox_test.cljs           | 29 +++++++++++++++++++
 .../x_multi_combobox_test.cljs                | 29 +++++++++++++++++++
 4 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/baredom/components/x_combobox/x_combobox.cljs b/src/baredom/components/x_combobox/x_combobox.cljs
index 0d8aeaf4..1e94cf34 100644
--- a/src/baredom/components/x_combobox/x_combobox.cljs
+++ b/src/baredom/components/x_combobox/x_combobox.cljs
@@ -206,7 +206,7 @@
    "[part=chevron]{"
    "display:inline-flex;align-items:center;"
    "color:var(--x-combobox-chevron-color);flex-shrink:0;margin-left:0.25rem;"
-   "transition:transform 200ms ease;pointer-events:none;"
+   "transition:transform 200ms ease;cursor:pointer;"
    "}"
    ":host([open]) [part=chevron]{transform:rotate(180deg);}"
    "[part=panel]{"
diff --git a/src/baredom/components/x_multi_combobox/x_multi_combobox.cljs b/src/baredom/components/x_multi_combobox/x_multi_combobox.cljs
index 288c0972..1be2c9b6 100644
--- a/src/baredom/components/x_multi_combobox/x_multi_combobox.cljs
+++ b/src/baredom/components/x_multi_combobox/x_multi_combobox.cljs
@@ -184,7 +184,7 @@
    "flex-shrink:0;"
    "margin-left:0.25rem;"
    "transition:transform 200ms ease;"
-   "pointer-events:none;"
+   "cursor:pointer;"
    "}"
    ":host([open]) [part=chevron]{"
    "transform:rotate(180deg);"
diff --git a/test/baredom/components/x_combobox/x_combobox_test.cljs b/test/baredom/components/x_combobox/x_combobox_test.cljs
index b26d613c..71b890dd 100644
--- a/test/baredom/components/x_combobox/x_combobox_test.cljs
+++ b/test/baredom/components/x_combobox/x_combobox_test.cljs
@@ -44,6 +44,35 @@
     (is (some? (shadow-part el "[part=chevron]")))
     (is (some? (shadow-part el "[part=panel]")))))
 
+;; ── Chevron is hit-testable (regression: issue #267) ─────────────────────────
+;; The chevron carries a `pointerdown` listener that toggles the panel. If CSS
+;; sets `pointer-events:none` on it, real clicks fall through and the handler is
+;; dead code. A synthetic dispatchEvent bypasses hit-testing, so we assert the
+;; computed style directly — this is what actually caught the bug.
+(deftest chevron-is-hit-testable-test
+  (let [^js el      (append! (make-el))
+        ^js chevron (shadow-part el "[part=chevron]")
+        pe          (.-pointerEvents (js/getComputedStyle chevron))]
+    (is (not= "none" pe)
+        "chevron must receive pointer events so its click handler can fire")))
+
+;; ── Chevron pointerdown toggles the panel (issue #267) ───────────────────────
+(deftest chevron-pointerdown-toggles-open-test
+  (let [^js el      (append! (make-el))
+        ^js chevron (shadow-part el "[part=chevron]")
+        fire!       (fn []
+                      (.dispatchEvent
+                       chevron
+                       (js/PointerEvent. "pointerdown"
+                                         #js {:bubbles true :cancelable true})))]
+    (is (not (.hasAttribute el model/attr-open)))
+    (fire!)
+    (is (.hasAttribute el model/attr-open)
+        "pointerdown on the chevron should open the panel")
+    (fire!)
+    (is (not (.hasAttribute el model/attr-open))
+        "pointerdown on the chevron while open should close the panel")))
+
 ;; ── Default state ────────────────────────────────────────────────────────────
 (deftest default-state-test
   (let [^js el    (append! (make-el))
diff --git a/test/baredom/components/x_multi_combobox/x_multi_combobox_test.cljs b/test/baredom/components/x_multi_combobox/x_multi_combobox_test.cljs
index 0eb23df0..78dc1763 100644
--- a/test/baredom/components/x_multi_combobox/x_multi_combobox_test.cljs
+++ b/test/baredom/components/x_multi_combobox/x_multi_combobox_test.cljs
@@ -48,6 +48,35 @@
     (is (some? (shadow-part el "[part=chevron]")))
     (is (some? (shadow-part el "[part=panel]")))))
 
+;; ── Chevron is hit-testable (regression: issue #267) ─────────────────────────
+;; The chevron carries a `pointerdown` listener that toggles the panel. If CSS
+;; sets `pointer-events:none` on it, real clicks fall through and the handler is
+;; dead code. A synthetic dispatchEvent bypasses hit-testing, so we assert the
+;; computed style directly — this is what actually caught the bug.
+(deftest chevron-is-hit-testable-test
+  (let [^js el      (append! (make-el))
+        ^js chevron (shadow-part el "[part=chevron]")
+        pe          (.-pointerEvents (js/getComputedStyle chevron))]
+    (is (not= "none" pe)
+        "chevron must receive pointer events so its click handler can fire")))
+
+;; ── Chevron pointerdown toggles the panel (issue #267) ───────────────────────
+(deftest chevron-pointerdown-toggles-open-test
+  (let [^js el      (append! (make-el))
+        ^js chevron (shadow-part el "[part=chevron]")
+        fire!       (fn []
+                      (.dispatchEvent
+                       chevron
+                       (js/PointerEvent. "pointerdown"
+                                         #js {:bubbles true :cancelable true})))]
+    (is (not (.hasAttribute el model/attr-open)))
+    (fire!)
+    (is (.hasAttribute el model/attr-open)
+        "pointerdown on the chevron should open the panel")
+    (fire!)
+    (is (not (.hasAttribute el model/attr-open))
+        "pointerdown on the chevron while open should close the panel")))
+
 ;; ── Default state ────────────────────────────────────────────────────────────
 (deftest default-state-test
   (let [^js el    (append! (make-el))