Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

LiveView AlpineJS @click doesn't work after a new item is inserted #1203

Closed
joelparkerhenderson opened this issue Nov 2, 2020 · 5 comments
Closed

LiveView AlpineJS @click doesn't work after a new item is inserted #1203

joelparkerhenderson opened this issue Nov 2, 2020 · 5 comments

Comments

@joelparkerhenderson
Copy link

joelparkerhenderson commented Nov 2, 2020 •
edited

I've tried the advice in the similar issue: #996

Environment

Elixir version (elixir -v): 1.11.1
Phoenix version (mix deps): 1.5.6
Phoenix LiveView version (mix deps): 0.14.7
NodeJS version (node -v): v14.15.0
NPM version (npm -v): 6.14.8
Operating system (uname -a): Darwin … 19.6.0 Darwin Kernel Version 19.6.0 …
Browsers you attempted to reproduce this bug on (the more the merrier): Firefox current, Chromium current
Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: yes

Actual behavior

Given: LiveView renders a page of user blog posts, and each post has an Alpline @click toggle to show/hide more info.

When: user clicks the toggle button.

Then: nothing happens on any post that was inserted after the page loaded. (For comparison, everything works fine on posts that were loaded during the page load. For diagnosing, everything work fine when I reload the page i.e. the posts that didn't work do start working as expected.

Expected behavior

The click works. (Same as it does on the posts that were loaded during the page load).

Details

I'm loading Alpine in root.html.leex as typical:

<body>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

The app.js file includes the recommended code from Chris McCord:

let liveSocket = new LiveSocket("/live", Socket, {
    dom: {
        onBeforeElUpdated(from, to) {
            if (from.__x) {
                window.Alpine.clone(from.__x, to)
            }
        }
    },
    …
@joelparkerhenderson joelparkerhenderson changed the title LiveView AlpineJS @click doesn't work after insert LiveView AlpineJS @click doesn't work after a new item is inserted Nov 2, 2020
@mgibowski
Copy link
Contributor

Could you try loading Alpine.js with webpack instead of CDN?

I mean editing assets/package.json and adding:

"alpinejs": "^2.7.3", inside of "dependencies" section,

then running npm install inside of the assets folder.

My hypothesis is that when you create liveSocket inside of app.js, Alpine might not be loaded yet. If you include it in package.json it will be bundled together with your code.

@tcoopman
Copy link
Contributor

tcoopman commented Nov 7, 2020

You need to import it in app.js as well if you want to have it bundled with webpack

@dvic
Copy link
Contributor

dvic commented Nov 7, 2020

Did you try to replicate this without liveview? It might be a problem with Alpine.js itself, as I stumbled upon a bug that is still not solved: alpinejs/alpine#756 (demonstrated here: https://jsbin.com/zucomuguza/1/edit?html,js,console,output)

@joelparkerhenderson
Copy link
Author

joelparkerhenderson commented Nov 12, 2020 •
edited

Thanks all for the advice.

@tcoopman Yes, trying with webpack and an error shows up that may be as a result of how Alpine processes code in an eval-like way; my understanding is that Alpine will be improving in this area soonish: alpinejs/alpine#855

@dvic I didn't try without LiveView, because I need LiveView.

I replaced Alpine with vanilla JS, which is working fine with LiveView, so I aim to revisit this once the above Alpine improvement happens. If an admin wants to close this for now, that's fine. Thanks all!

@chrismccord
Copy link
Member

Provided you have window.Alpine.clone(from.__x, to), this is not an issue on our side to handle. If you are dynamically adding the click binding for "like" DOM structure, ie a sibling gets rendered without click in some cases, and with click in others, then ensure your DOM node is unique with a new ID. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@joelparkerhenderson @tcoopman @chrismccord @mgibowski @dvic