x-show and x-html appear to be broken when integrated with phoenix LiveView

[mcgingras]

I've followed the dialog between liveview and alpine here, but I am still experiencing issues combining LiveView and Alpine. I'm included the relevant snippet that is supposed to allow for seamless integration between the two, but I'm noticing two problems.

1. I have a dropdown that shows/hides using x-show. It works fine, but when I perform an action through LiveView that sends new data to the page, the dropdown locks up and remains closed. None of the dom elements that are part of the dropdown are changing through this liveview action.

2. I wanted to see if anything else was funky, so I added a small snippet of alpine code that set a counter variable and displayed the value of the counter variable in a span with x-html. I added an increment button that increments the value upon click.

<div x-data="{counter: 1}">
        <span x-html="counter"></span>
        <button x-on:click="counter+=1">up</button>
</div>

The counter works fine, but if you change the dom through a liveview action, the span set with x-html returns to its old value of 1. However, if you increment the counter a bunch of times (say to 5), then change the dom through a liveview action, the x-html span will reset to 1, but if you click the counter again, it shows the expected count (in this case 6, since it was previously on 5)

I think there is still some funky behavior going on between LiveView and Alpine. Hopefully this is the best place to be opening an issue -- I'm looking for guidance especially on the dropdown issue -- it is very frustrating.

I'm happy to provide more code snippets or additional information.

A short update --

It appears the issue with point 1 (the dropdown issue) is related to the fact that the liveview action is invoked via a click to an element within the dropdown. The dropdown is in an open state when it gets clicked, but the dom changes via liveview seem to cause it to close again (The initial state is closed).

Dispatching the liveview action does not change the dropdown state (open or not) so as far as alpine is concerned, it is still open, yet once the liveview patches the dom, it seems to think it is closed. I'm thinking this mismatch is causing it to lock up. I added @click="dropdownOpen = false" on the same element that dispatches the liveview action (such that they are in sync) and it resolved the issue of the dropdown locking up.

The same sort of "out of sync" behavior is consistent with the x-html issue as well; when liveview patches the dom, the initial state of the counter is shown, rather than what alpine might have stored somewhere as the true value of the state

I'm fairly new to both of these libraries so I'm not sure how alpine is handling the state of it's data internally, or why this mismatch occurs, but I still think it's worth noting as an issue.

I guess I would amend the issue to: "alpine data state out of sync once Liveview forces a dom update" or something along those lines.