Alpine.js x-bind not applying after an HTMX swap

[yaakovLowenstein]

Hi. I'm not sure this officially counts as a bug but I ran into the same issue as this post :

https://stackoverflow.com/questions/76891618/alpine-js-x-bind-not-applying-after-an-htmx-swap

The issue is that when swapping an element with htmx the x-binding was not working after the swap. (The state was not being swapped so that was not the issue.)

Someone in the comments suggested removing the id from the element and that worked!

I have no idea why that worked and it doesn't sound like the one who wrote that in the StackOverflow post understood why either.

Here is the code I am using (this is without the id):

<div 
                x-data="{value:{{item.pk}}}"
                class=" mock-checkbox"
                :class="   {'checked':$store.checked.values.includes($data.value) }"
                @click="$el.classList.contains('checked') ?  $store.checked.remove($data.value) : $store.checked.add($data.value)">
                <span class='mock-checkbox-check'>&#10003</span>
</div>

[ekwoka]

🤔 That's curious. the id shouldn't really matter unless htmx is doing something strange with them...

[SimoTod]

Are you using https://htmx.org/extensions/alpine-morph/?

[yaakovLowenstein]

No, I saw it but didn't think I needed it for my case because the state lives outside of the element being swapped.

I even checked the value of the state after the swap and it had the value I expected but the x bind was not triggering off of that state

[SimoTod]

I suspect it's not going to work because Alpine didn't see an attribute change but probably in the underlying DOM, that element is a different one so the reactive effect is bound to an element that doesn't exist anymore. Likely some incompatibility between Alpine and htmx swapping mechanism. I would try that plugin.

[ekwoka]

Oooh, yes, are you using alpine morph plugin?

I can't imagine this issue would happen without using that since it should just be seen as totally different elements...

[yaakovLowenstein]

I'm not using it. You think that it would only happen if I am using it?

[ekwoka]

Since the elements with morph would try to "merge" the information and some can break. but htmx just drops them entirely, which SHOULD totally reset it as if it was a fresh render...

[yaakovLowenstein]

Don't know if this helps at all but this is a gif of what I'm working on. And it shows even stranger behavior as well. ( I didn't know how to describe what's happening so I figured a gif would be best)

[yaakovLowenstein]

you can't see the mouse which is annoying🤦.

1. I click the first 2 checkboxes
2. I filter the table by Nov 23 ( the table is swapped via htmx) where you can see that nothing is checked (the first checkbox should be)
3. I reset filters and only the last 2 are checked.
4. The first checkbox is unclickable and when I click a new checkbox it also checks the first (this happens because the value of the first is still in the store, but it's strange that it's not checked and that it can't be clicked but checking a new one triggers that one to be checked)

[ekwoka]

That is really strange...

[ekwoka]

Oh, your conditions are just strange and causing issues.

You should just be using x-model on the checkbox, not the :class :checked etc.

[ekwoka]

For the class, you don't need the class at all.

the element will already be selectable with the :checked pseudo-selector.

Should really just use real checkboxes or it will be an accessibility nightmare. Like right now, you can only use a mouse to click them...

[yaakovLowenstein]

Thank you for pointing me towards x-model I had read about it but didn't fully grasp it.

I got it to work with checkboxes using x-data and x-model.

I had to put the x-data though on an element out of the htmx that was being swapped even when using the morph plugin from htmx. I'm not sure why that is because I thought the whole point was to keep the state.

I have been working htmx for awhile and am new to alpinejs. I still do not understand a lot of it and am having trouble grasping why some things work and some don't, but overall it is very cool and does work nicely with htmx.

[yaakovLowenstein]

@SimoTod is there somewhere I could read to fully understand the way alpine watches and knows when something has changed.

You mentioned that without an id it would be a new element which alpine can watch easily vs if it's morphed in. How come that is?

[SimoTod]

Only the source code as it's not something the majority of developers really cares about: https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/mutation.js

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

The summary is:
If you add an element, the mutation observer runs every new Alpine directive.
If you remove an element, the mutation observer destroys all effects linked to its Alpine directives.
If you add an attribute and it's an Alpine directive, the mutation observer runs that directive.
If you remove an attribute and it's an Alpine directive, the mutation observer destroys all effects linked to that directive.
If you add/remove a normal attribute, the mutation observer does nothing.

[yaakovLowenstein]

Thank you!

[shimikano]

Hello

I ran into the same issue and could reproduce it in a Codepen: https://codepen.io/shimikano/pen/MWREmPO

The component in question is:

<div x-data="{ valid: true }">
  <label for="foo" x-text="'The border should be ' + (valid ? 'green' : 'red') + ': '"></label>
  <input id="foo" name="foo" value="bar" :class="valid ? 'valid' : 'invalid'">
</div>

When htmx swaps in the same markup with valid set to false, the :class binding on the <input> is applied but quickly cleared (border flashes red). Removing the id attribute from the input solves the issue.

Does anyone have some insight as to how and where (alpine or htmx) this can be tackled?

Using plain htmx and alpinejs, without any plugins.

Thank you.

[SimoTod]

I think you need https://htmx.org/extensions/alpine-morph/ if you want htmx and alpinejs to play together nicely otherwise htmx will mess up with the state of your alpine components

[shimikano]

Thank you for your reply @SimoTod.

After some more digging, I understand now that the culprit is the default htmx swap/settle algorithm for elements with an id (documented here). There is also a corresponding htmx issue.

Possible workarounds include:

• Remove the id attribute.
• Set the htmx settle delay to zero (settle:0).
• Use an alternative swap algorithm such as the alpine morph extension you mentioned. This also preserves the alpine state across swaps, which may or may not be what you want.
• Remove the attributes in question from htmx.config.attributesToSettle.

I updated the Codepen, demonstrating 2 workarounds.