Issue with x-cloak with Alpine JS and Phoenix

Phoenix Forum Questions / Help
1

Hello everyone! Its a bit non-elixir topic, but I cant understand something in PETAL stack. The problem is raised when I want to implement hidden content with Alpine JS. Here`s some code:

<div x-data="{ open: false }">
    <button @click=" open = ! open ">toggle</button>
    <div x-show="open" class="text-center" x-cloak>
       <p>content</p>
    </div>
</div>

So my idea is to show the content only when a user clicks the show button. But when I load the page the content is visible and I need to press the button twice to hide it. I tried to use x-cloak and it didn’t help. My opinion is that I added CSS style for x-cloak is incorrect. I know my CSS style is stored in assets/css, but I also tried to add a script tag to root.

Thanks! :smiley:

2

I had this issue and could not get it sorted. Reverting back to 2.8.4 of Alpine did the trick.

I’ll be interested if you figure it out. I gave in to converting to JS commands in LiveView 0.17 after a few hours.

3

The .away modifier on events is broken with LiveView on Alpine 3. Haven’t found a solution, but removing those works. Alternatively, staying on Alpine 2 works.

4

Well, it works now. All I needed is to change live socket config in app JS:

let liveSocket = new LiveSocket("/live", Socket, {
    params: {_csrf_token: csrfToken},
    dom: {
        onBeforeElUpdated(from, to){
            if (from._x_dataStack) { window.Alpine.clone(from, to) }
        }
    }
})

The problem was with this line of code:

if (from._x_dataStack) { window.Alpine.clone(from, to) }

In the official documentation, this code is for Alpine v2. Hope it will help you!(@cschmatzler)

1 Like
5

This tripped me up too. Let me submit a PR to update the docs.