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))