Liveview blowing up Alpine state?

Try removing Alpine.initTree(to) from onBeforeElUpdated. I had similar problems with it. The errors you are seeing might be easier to debug if you enable source maps.

I am guessing that since you are using a changeset, that the DOM element that you are interacting with is a form. In the past, I have had issues with Alpine state stored on the form tags (iirc Morphdom deals with patching forms differently that it does patching other HTML tags).

To circumvent the Morphdom form issues, I leveraged Spruce to store the Alphine state outside of the form tag GitHub - ryangjchandler/spruce: A lightweight state management layer for Alpine.js. 🌲 · GitHub. With the release of Alpine 3.x though, what functionality Spruce offered is now supported directly in AlpineJS.

So I am actually using Alpine.state('loader', false) to manage state here, initialized in a hook. My loader is inside of a form though so this could be the issue. I’ll have to do a bit of refactoring to test it out, but thanks for the lead!

Have you tried adding phx-update=“ignore” to the loader element tag? I’m Not actually sure if this would work on an element inside the form component, but might be worth trying

Yes, I tried pretty much everything back then. We ended up abandoning Apline because of too many issues at the time. It may be more stable now, this was quite a while ago and they seemed to be constantly evolving.

Sorry, I just realized how old this was! It showed up on my suggested feed and didn’t realize the date : ) I hope you found something that works for you. Alpine is working well for me today but honestly I just started with it.

This is vaguely similar to what I’m experiencing. Here’s a minimal project that reproduces the issue. I’d be grateful if anyone can take a look.

The issue is that when
A) rendering directly from a LiveView, everything works. But when
B) the rendering is moved to a LiveComponent, Alpine’s x-show (or something else) “breaks”: the search results still show, but not immediately on typing (only after users also presses the Enter key).

In other words, moving the render/1 shown below (as well as some few handle_event/3) from

• A) a :live_view to
• B) a :live_component

somehow breaks and Alpine’s x-show doesn’t show the <ul> immediately. It does show up but only if one also then presses say the Enter key, or defocuses-and-refocuses the search <input> with a mouse, etc.

def render_from_live_view(assigns) do
  ~H"""
  <div class="flex-col relative" x-data="{open: false}">
    <p>Using LiveView, the result will immediately show below, without needing to also press Enter key.</p>
    <form id="search-form" phx-submit="submit">
      <input
        placeholder="type 'a'"
        name="search-input"
        id="search-input"
        class="block border border-black"
        phx-change="search"
        phx-hook="FocusOnMounted"
        x-on:focus="open = true"
      />
    </form>
    <ul :if={@search_results != []} x-show="open">
      <li :for={result <- @search_results}><%= result %></li>
    </ul>
  </div>
  """
end

And the relevant lines from app.js:

import Alpine from "alpinejs"
window.Alpine = Alpine
Alpine.start()

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  hooks: {
    FocusOnMounted: {
      mounted() {
        this.el.focus();
      }
    },
  },
  dom: {
    onBeforeElUpdated(from, to) {
      if (from._x_dataStack) {
        window.Alpine.clone(from, to);
      }
    }
  }
})

Visually, I only see the following differences in the relevant HTML between the :live_view (left) and the :live_component (right):

Screenshot 2023-03-23 at 20.29.271200×356 44 KB

Other somewhat related threads:

• AlpineJS "loses" reactivity when rendered using <.live_component> Liveview >0.17 - #3 by Rubas
• Proper AlpineJS Integration with Liveview

I’ve fixed the error reported in my message above by merely adding an id attribute on the element that also has Alpine’s x-data attribute. Why was/is the missing id attribute an issue for Alpine? (It seems like any id attribute will do.)

It’s unclear why is it problematic if an id attribute isn’t explicitly provided. In other words, how come the LiveComponent-generated “id” doesn’t suffice? This is seen in my previous message above, on the image diff of two HTMLs; specifically, the auto-generated id is in the top red rectangle.

Investigating the LiveSocket’s dom object, specifically the onBeforeElUpdated(from, to) callback (as seen in app.js above) does suggest there’s some difference already on the initial load, before any user interaction: on load, the from and to elements only get printed in the console when the mentioned id is given (otherwise not).

Seems like I should first figure out why onBeforeElUpdated does (not) get called when id is (not) provided. Please let me know if you see where I’m misusing Alpine and/or LV; I’ll admit already that having both LV’s :if= and Alpine’s x-show on the same element seems superfluous and asking for trouble.

PS. For Alpine, I’ve looked into docs at 1) the “Essentials” section, 2) on $id, 3) on x-id directive, and 4) on Alpine.data (and glanced at other sections as well) and couldn’t find any mention of a required id attribute, or anything that would explain this behaviour.

Or put an id on all alpine scopes.

And yes, you’re asking for (and getting) trouble. Personally, I ripped alpine out first chance I got. There is a certain elegance to alpine but it’s not worth the headache for me.

Thanks for the reply! Indeed, I’m already eyeing if/how JS Commands & Hooks might be able to replace Alpine.

Still, I’d be curious to read from you or anyone that knows why exactly is the above behaviour different between
A) a LiveComponent-provided id attribute (seen on the image above, in the top red rectangle), vs.
B) my own, explicitly set id attribute (on the same HTML element, the top-level <div>)