hx-confirm on checkbox should not alter the checkbox state

[mariusGundersen]

Given the following:

<input type="checkbox" role="switch" hx-post="/enabled" hx-confirm="Are you sure you want to enable?">

If you click cancel on the confirm the checkbox still changes state, but no ajax request is triggered. Instead it should leave the checkbox unchecked (or checked, if it was initially checked) when the user cancels the confirm dialog.

[MichaelWest22]

Hi mariusGundersen,

hx-confirm is designed to cancel the htmx request or not. I don't think its intended design is to also alter the core functionality of html events. There are situations where htmx will call preventDefault on a click or submit event when clicking a link or submitting a form so that these actions can be handled only though htmx and don't cause full page reloads as the link or form is submitted by the browser. But outside of this I don't think htmx ever tries to prevent default browser behavior so you would expect a checkbox to work with a click event. So you can think of it as hx-confirm does not alter the checkbox state it just leaves it as it was which means it will be toggled by the click event.

You might be able to trick htmx into preventing the checkbox toggle by going

<a href="/enabled" hx-post="/enabled" hx-confirm="Are you sure you want to enable?">
  <input type="checkbox" role="switch">
</a>

This works because a htmx enabled link with a valid href will block the default behavior to avoid a full page link load and it will also block the checkbox click event when it does this. With this the checkbox will never get toggled so your server side would need to return a new partial response with a checked text box inside a link with a are you sure you want to disable confirm message instead. Note that if htmx is not loaded quick enough or the user disables javascript and the user clicks the checkbox it will do a full page navigation to /enabled so you would have to get the backend to respond with a full page response including the enabled checkbox if the server detects a no hx-request header telling you it is a full page link request.

You can also use an event listener or an hx-on to listen for the htmx:confirm https://htmx.org/events/#htmx:confirm or the click event and just toggle the checkbox to on so that it will be on and then the click even will uncheck it or set it off inside a short setTimeout.

Another option is to disable the checkbox so it won't respond to click events and then apply a custom CSS style to make it look enabled. The checkbox would still be checkable if the /enabled endpoint returns a valid checked checkbox.

Hope this helps.

[mariusGundersen]

These seem like hacky workarounds. It's also a bit strange that it sometimes prevents default actions but not always. Putting an action on an anchor because it has the right side effect is very clunky.

I feel like either the cancel of confirm should prevent default on input type checkbox, or there should be an event available to handle when a user does not confirm, so that the checkbox state can be reverted.