Alpine does not see the x-show attribute on elements swapped in by htmx

[adhusson]

I'm using htmx & Alpine together and I'm having an issue with htmx-swapped content.

I have an inline edit form that looks like this:

<div hx-target="this" hx-swap="outerHTML" x-data="{editing: false, content:'My comment'}">
  <button x-show="!editing" x-on:click="editing=true">🖊</button>
  <button x-show="editing" x-on:click="editing=false">↩️️</button>

  <div x-show="!editing" x-text="content"></div>
  <form x-cloak x-show="editing" id="342" hx-put="/comment/342">
    <input x-bind:value="content" name="content" type="text" />
    <input type="submit" value="go">
  </form>
</div>

When the server receives PUT /comment/342, it re-renders the snippet above but with an updated content value.

My problem is that the swapped content shows both the content itself (<div x-show="!editing" x-text="content"></div>) and the edit form (<form>...</form>).

It's as if Alpine is completely ignoring the x-show attributes of the swapped content. But it does process the inserted elements in some way (for instance it removes the x-cloak attribute from the form)

[SimoTod]

I don't use htmx but from the syntax it seems like you are swapping the outerHTML (so you are also removing the element with x-data and it's data scope where you defined editing)

[adhusson]

Thanks, yes hx-swap="morph" almost fully works, but alpine does not automatically interpret the x-data attribute of the swapped-in element (it does automatically interpret the x-show attribute of the swapped-in element's children).

[ekwoka]

It's not meant to. Would the swapped in element have a different x-data? x-data won't be reevaluated, as generally that would reset the component, which is what morph is meant NOT to do.

[adhusson]

The idea was to swap in a copy of the element with editing set to false, thus hiding the input field and showing the div with the updated comment.

I think it would be a nice pattern: by sending back the updated comment fragment, you reset it to its exact state before the user started to edit it.

Another way to look at it is that the application state is both the DOM state and the javascript state, so if a swapped-in HTML fragment has data that is semantically meaningful for the javascript state, that should be taken into account and merged in.

[SimoTod]

That's make sense in your use case but it would break a lot of existing stuff (anything using Livewire probably). The majority of the times people send back the original template but doesn't expect Alpine to reset the state. At least, that's what morphing does (you can also see that your x-data attribute doesn't normally change once alpine is initialised, the state does).

In theory, you should probably set editing back to false when you send the form to avoid race conditions between concurrent editing.

[ekwoka]

On that note, a new x-init attribute would be evaluated.

That could be used to change the state in progress.

Also, just htmx events

[danielnieto]

@adhusson I had the same issue as you, it seems it's more of a problem on HTMX side, after a lot of time I remembered that HTMX tries to keep the same DOM element if it has a "stable" ID between swaps, in my case I had the following:

<div role="menu" x-cloak x-show="isOpen" id="contact-menu-{{ contact.id }}" @click.outside="isOpen=false" @keydown.escape.window="isOpen=false">

and I was seeing the same issue you described, first time it was fine but as soon as the page got re-rendered (by HTMX) all of my menus would be visible! I fixed it by removing the id from the element and that solved the problem... Looks like HTMX trying to preserve the DOM element and just mutate it messes up the interaction with Alpine

[danielnieto]

or keep the id and add hx-preserve, it also works:

<div role="menu" hx-preserve x-cloak x-show="isOpen" id="contact-menu-{{ contact.id }}" @click.outside="isOpen=false" @keydown.escape.window="isOpen=false">

[ekwoka]

It is helpful to not use x-cloak but instead use style="display:none;" on things expected for x-show to hide on load. This is a way to solve these kinds of issues.

[steven-mercatante]

+1 for manually adding style="display:none". This fixed the HTMX + Alpine issue for me.

[jh0ker]

This issue specifically is related to the settling mechanism in HTMX. See this issue in the HTMX repo for more info. It also explains why these workarounds work and discusses some other ones.