Phoenix.InfiniteScroll does not initialize after page load

[derekkraan]

Environment

• Elixir version (elixir -v): 1.17.0
• Phoenix version (mix deps):1.8.1
• Phoenix LiveView version (mix deps):1.1.17
• Operating system: Linux
• Browsers you attempted to reproduce this bug on (the more the merrier): Firefox
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

I've managed to create a single file that demonstrates the issue: https://gist.github.com/derekkraan/bef48f9049049b308d4c8e27439e8c59

The behaviour is as follows: I have a LV stream, but on page load phx-viewport-top and phx-viewport-bottom are both unset (because there are not that many items in the stream to begin with). Then, when some new items appear (and the LV is notified of this via pubsub), we set phx-viewport-bottom, but it is never triggered.

I also noticed via debugging that the Phoenix.InfiniteScroll hook's mounted() callback wasn't being called in this instance.

The callbacks do work if they are added on page load. We are working around the issue at the present time with something like this: phx-viewport-bottom={if @bottom?, do: JS.push("no-op"), else: JS.push("next-page")}.

Expected behavior

I expect the phx-viewport-bottom and phx-viewport-top callbacks to trigger.

[SteffenDE]

I believe we also don't support dynamically adding phx-hook to elements that are already rendered as we only check for hooks when elements are added. You should be able to work around this by also rolling the ID of the element you use phx-viewport-* on when you add it to the element.

I'm not 100% sure why we don't also check for hooks on update - it might be too expensive to do it, as the update callback is called for ALL elements on the page.

cc @chrismccord

[derekkraan]

Thanks for the quick response @SteffenDE !

I believe we also don't support dynamically adding phx-hook to elements that are already rendered as we only check for hooks when elements are added

The hook is being dynamically added on update in dom.js here, in the LV JS source code. We are not dynamically adding the hook in our application code.

This page in the docs contains an example which is basically how we are using this feature:

   phx-viewport-top={@page > 1 && JS.push("prev-page", page_loading: true)}
   phx-viewport-bottom={!@end_of_timeline? && JS.push("next-page", page_loading: true)}

The scenario being that @page is 1 and @end_of_timeline? is true, in other words, there are less than a full page's worth of items on the timeline at load time. Which is I think well within the realm of possibilities.

You should be able to work around this by also rolling the ID of the element you use phx-viewport-* on when you add it to the element.

Rolling the ID doesn't work, I think (haven't tried it yet), because it would wipe out the already streamed items.

(Just to be more concrete, our use case is a chat window, and this was happening any time the initial chat had fewer messages than the initial load-in)

---

Can we simply add phx-hook="Phoenix.InfiniteScroll" as a workaround? I might check this when I get back into the office on Monday. And maybe it's the easiest thing™️ .

---

Just as an aside, my first attempt at a workaround was like this: phx-viewport-top={if @top?, do: %JS{}, else: JS.push("prev-page")} but this broke scrolling(!), since these lines need a round-trip to the server in order to stop blocking scrolling. I'm not sure if we can make the code work for any %JS{} you can throw at it, or if this should just be documented in the docs (happy to send a PR either way).

[SteffenDE]

We are not dynamically adding the hook in our application code.

Right, sorry, I didn't mean to imply that you're the one adding it, I only meant that it's the same issue because it is a hook underneath, so we only check when the element is added.

I'll try to come up with a fix :)

[derekkraan]

Adding phx-hook="Phoenix.InfiniteScroll" does indeed also work. And it's a much more straightforward workaround.

If you aren't able to think of a good way to fix the original issue, I think a documentation change asking users to add phx-hook="Phoenix.InfiniteScroll" when they want to use phx-viewport-* handlers dynamically is probably pretty reasonable.

edit: actually, does this result in the hook being added twice to the element?