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:
1 parent
2fd0828c06
commit
ace9e57d27
4 files changed
+96
-6
No files matched your search
+11
-6
@@ -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) => {
|
||||
|
||||
Reference in new issue
Block a user