How to get `stream_delete` and `intersperse` to play nicely?

neurodynamic

I have a list of html elements generated from a LiveView stream. I want them to show up on the page interspersed with <hr> elements as visual dividers, but this seems to break the stream_delete function. If I display them like this everything works fine

<div id={id} :for={{id, item} <- @streams.items}>
  <%= item.name %>
  <.link
            phx-click={JS.push("delete", value: %{id: item.id}) |> hide("##{item.id}")}
            data-confirm="Are you sure?"
          >Delete</.link>
</div>

but when I try it like this instead

<.intersperse :let={{id, item}} enum={@streams.items}>
  <:separator><hr></:separator>
  <div id={id}>
    <%= item.name %>
    <.link
            phx-click={JS.push("delete", value: %{id: item.id}) |> hide("##{item.id}")}
            data-confirm="Are you sure?"
          >Delete</.link>
  </div>
</.intersperse>

the stream_delete function called when the “Delete” button is pressed doesn’t remove the relevant item from the page (though it does successfully delete it from the database). Anyone know why this breaks it and/or if there’s a way to make it work?

5 comments

/phoenix #streams #liveview

0 879 5

2023-05-21 23:31:15 UTC

Showing Posts 1 to 5

Show Best Posts
Show All (oldest first)
Show All (newest first)

codeanpeace

Are you including phx-update="stream" in the parent DOM container?

Required DOM attributes

For stream items to be trackable on the client, the following requirements must be met:

The parent DOM container must include a phx-update="stream" attribute, along with a unique DOM id.

Each stream item must include its DOM id on the item’s element.

source: stream/4 | Phoenix.LiveView docs

Also, what is the intention of hide("##{item.id}"} in phx-click?

Post #1

neurodynamic

Yup, the phx-update="stream" and ids are all where you’d expect. I’m not sure what the hide("##{item.id}"} is for, but that’s part of the boilerplate for the delete buttons that get autogenerated by mix phx.gen.live.

Post #2

codeanpeace

Hmm, the DOM id that LiveView uses to identify streams are set at different level. Are the .intersperse components also setting their id the same way which then clashes with the div level id?

Post #3

neurodynamic

I don’t think the intersperse component creates any sort of independent wrapper element, so for me, with the parent included it looks like

<div id="items" phx-update="stream">
  <.intersperse :let={{id, item}} enum={@streams.items}>
    <:separator><hr></:separator>
    <div id={id}>
    ...etc...

and the rendered html looks like

<div id="items" phx-update="stream">
  <div id="item-1">
    item name
    [delete link is here]
  </div>
  <hr>
  <div id="item-2">
  ...etc...

I am wondering if maybe using intersperse and with streams might just not be possible, because the separator hr elements don’t have any way to get assigned their own unique ids. They don’t have access to the id variable, so I can’t just give them like "#{id}-separator or something to identify it, and even if I could, my gut would be that the stream implementation probably relies on the assumption that the HTML list created by a stream only has elements directly tied to a specific stream item (trying to find stream rendering in the source code and coming up blank so far).

Post #4

codeanpeace

Hmm, that would make sense – have you tried moving the <hr> elements into the <div id="item-x"> elements or alternatively using those divs as wrappers such that the <hr> elements are no longer siblings with them?

Scoping the search to javascript files seems to help.

Post #5

— All posts loaded —