fix(ui): hx-confirm interception actually worked — htmx 2 detail shape

User report: Remove Feed still used the browser dialog. Headless-proven
root cause (tests/ui/confirm_probe.spec.ts): the htmx:confirm handler
read evt.detail.element, which htmx 2 does not provide (its detail is
{ elt, question, issueRequest, ... }) — the handler returned at
'if (!elt) return' BEFORE preventDefault, so every hx-confirm sitewide
fell through to htmx's native confirm. The acbcc61a migration only ever
worked for direct confirmDialog() callers; hx-confirm interception was
dead on arrival against htmx 2 and no test watched the JS side.

Fix: read detail.question (htmx's own closest-attribute resolution of
hx-confirm); return without preventing default when absent. Probe
spec pins: click Remove Feed → #confirm-modal opens with the message,
cancel hides it, no dialog event fires.

Companion fixes in the same user-test round (one commit, one defect
family — templ boolean attributes + confirm-modal placement):
- Add-modal Download order never revealed: #podcast-download-all was
  nested in a wrapper div, so ':checked ~ .podcast-add-order' had no
  sibling relationship. Input, label, and order row are now siblings.
- Order/auto-download dropdowns always DISPLAYED the last option
  ('Newest first'/'Newest') whatever was saved: templ selected={ bool }
  emits selected="false" — presence selects, so every option was
  selected and the browser honored the last. Swept to selected?={...}
  across podcast_detail (14), book_detail_modals (10, incl. two
  always-checked checkboxes), collection_modal (2, same). Saves were
  correct all along; display only.
- Global confirm modal moved from SidebarSignIn (signed-out only!) into
  Header — signed-in pages had no #confirm-modal, so confirmDialog
  degraded to window.confirm even with a working interceptor.

Facet bar scale (user question): values now carry feed counts, sort
frequency-first, cap at 6 chips per group with a native <details>
'+N more' expander.

Probes: tests/ui/confirm_probe.spec.ts + add_order_probe.spec.ts
(live-server, BH_FEED-gated) — both pass against the dev instance.
This commit is contained in:
John O'Keefe committed 2026-10-30 12:24:16 -04:00
1 parent 2fd0828c06
commit ace9e57d27
4 files changed
+96 -6

No files matched your search

+11 -6
View File
@@ -63,15 +63,20 @@ function wireButtons(): void {
// htmx:confirm interceptor: every element with hx-confirm gets the
// modal instead of the browser dialog; confirming issues the request.
// (Canonical htmx pattern — see htmx docs, "confirming with a modal".)
//
// htmx 2 detail shape: { elt, question, issueRequest, ... } — question
// is the CLOSEST hx-confirm value htmx already resolved. (The original
// read detail.element, which htmx 2 does not provide; the handler
// bailed before preventDefault and EVERY hx-confirm fell through to
// the native dialog — user report 2026-10-30, headless-proven.)
document.body.addEventListener("htmx:confirm", function (evt) {
const custom = evt as CustomEvent<{
element: HTMLElement;
issueRequest: (override?: boolean) => void;
elt?: HTMLElement;
question?: string;
issueRequest: (skipConfirmation?: boolean) => void;
}>;
const elt = custom.detail.element;
if (!elt) return;
const question = elt.getAttribute("hx-confirm");
if (question === null) return;
const question = custom.detail.question;
if (!question) return; // not a confirm-gated request — normal flow
evt.preventDefault();
wireButtons();
confirmDialog(question).then((ok) => {