Fix Cancel button on description edit form

t-178·WorkTask·
·
·
·Omni/Jr.hs
Created3 months ago·Updated3 months ago

Description

Edit

When editing a task description at /tasks/<id>, clicking 'Cancel' does nothing.

Investigation findings: The Cancel link in DescriptionEditPartial (Web.hs line 1841-1849) uses HTMX: Lucid.a_ [ Lucid.href_ "#", Lucid.class_ "cancel-link", Lucid.makeAttribute "hx-get" ("/tasks/" <> tid <> "/description/view"), Lucid.makeAttribute "hx-target" "#description-block", Lucid.makeAttribute "hx-swap" "outerHTML", Lucid.makeAttribute "hx-confirm" "Discard changes?" ] "Cancel"

The Cancel is an <a href="#"> with HTMX attributes. The hx-confirm should show a browser confirm dialog before firing hx-get.

Possible issues: 1. The <a href="#"> may be preventing the default action before HTMX processes it 2. HTMX may not be intercepting anchor clicks correctly with hx-boost on body 3. The hx-confirm may be blocking the request

Debug approach: 1. Check browser console for JS errors when clicking Cancel 2. Try changing from <a> to <button type="button"> 3. Try removing hx-confirm temporarily to see if the swap works

Likely fix: Change from anchor to button: Lucid.button_ [ Lucid.type_ "button", Lucid.class_ "cancel-link", Lucid.makeAttribute "hx-get" ("/tasks/" <> tid <> "/description/view"), Lucid.makeAttribute "hx-target" "#description-block", Lucid.makeAttribute "hx-swap" "outerHTML", Lucid.makeAttribute "hx-confirm" "Discard changes?" ] "Cancel"

Also need to add CSS styling for .cancel-link as button to look like a link (no button appearance).

Timeline (0)

No activity yet.