HTMX + Alpine morph - Checkbox state not updating after HTMX morph swap

[tabrez96]

I encountered an issue where the checkbox’s state isn’t properly updated after an HTMX morph swap.
Here’s a demo link to reproduce the issue.

Steps to reproduce:

1. Check the checkbox in the demo.
2. Click on the “Morph” button to perform the swap.

Expected behavior:
The checkbox should become unchecked as the swapped checkbox is a new element that is unchecked.

Actual behavior:
The checkbox remains checked, even though the swapped HTML is an entirely new, unchecked checkbox.

Findings:

While investigating, I noticed that the plugin “patches” the attributes of the from node with the to node here. However, in the case of checkboxes, the checked state is controlled by a property on the DOM element, not an attribute.

To resolve this, I added 'patchProperties' alongside 'patchAttributes':

if (!updateChildrenOnly) {
    patchAttributes(from, to);
    patchProperties(from2, to);
}

function patchProperties(from2, to) {
    // Checkboxes have their "checked" state controlled by a DOM property, not the attribute.
    if (from2.type === 'checkbox' && from2.checked !== to.checked) {
        from2.checked = to.checked;
    }
}

Explanation:

• The checked attribute in the HTML sets the initial state, but the checked property reflects the live, dynamic state of the checkbox in the DOM.
• Simply updating the checked attribute during the morph process doesn’t correctly update the checkbox’s current state in the DOM.
• To fix this, the checked property must be explicitly synchronized during patching.

Let me know if this behavior is expected or if there’s a better way to handle this scenario!

[SimoTod]

There's nothing telling Alpine morph that the checkbox is new and the default behaviour is that, if it looks exactly the same, Alpine assumes is not new and preserve states. You can use <input type="checkbox" key="${Date.now()}"> in your snippet for the replace to achieve what you need. https://alpinejs.dev/plugins/morph#keys