Strange behaviour of Live-View rendering

Menkir

Hello guys. I’ve experienced a strange behaviour of Live-View:
I have a table like this (leex):

<table>
 <thead>
  <%= live_render(:Toolbar, container: {:tr, []}) %> # render <th> entries inside <tr> container
 </thead>
 <tbody>
  <%= live_render(:Data) %>
 </tbody>
</table>

As soon as i render the table the tag inside getting rendered within the first second and then disappear immediately.
To be clear:
The html output is first:

<table>
 <thead>
 <tr class=phoenix-connected etc...>
     <th>
      entry1
     </th>
     <th>
      entry2
     </th>
 </tr>
 </thead>
 <tbody>
  ...
 </tbody>
</table>

And then it transforms like this:

<table>
 <thead>
 <tr class=phoenix-connected etc...>
  "entry1"
  "entry2"
 </tr>
 </thead>
 <tbody>
  ...
 </tbody>
</table>

Off course the view get’s messed up and nothing works properly. The thing is, that it works weeks before. Looks like an Update messes everything up. But i don’t know which module.

Did some experienced something similar and have a workaround or solution?

edit: Could it be that the render engine detects the tags as useless because it make no sense in a separate context (outside of <tr> because the engine does not know if it is part of it)?

4 comments

/phoenix #table #liveview

0 964 4

2019-08-05 05:48:05 UTC

Showing Posts 1 to 4

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

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

Can you show more of the exact code? There may be some details here that matter which have been elided.

Post #1

Menkir

Sure.
Thats the liveview which is rendered in <thead> inside <tr> container:

    def render(assigns) do
       ~L"""
            <% displayed_data = @changeset.changes |> Enum.filter(fn {_, val} -> val end) |> Enum.map(fn {key, _} -> key end) %>
            <%= for entity <- @menubar, entity in displayed_data do %>
            <th scope="col"> # <-- this  tag is disappearing
                <%= entity%>

                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                <div class="dropdown-menu">
                    <button class="dropdown-item" phx-click="<%= entity%>-sort-ascending">Sort Ascending</button>
                    <button class="dropdown-item" phx-click="<%= entity%>-sort-descending">Sort Descending</button >
                    <button class="dropdown-item btn btn-default dropdown-toggle" data-toggle="dropdown">Columns</button>
                    
                    <div class="dropdown-menu">
                        <%= form_for @changeset, "#", [phx_change: :activate], fn f -> %>
                            <%= for entry <- @menubar do %>
                                <div class="dropdown-item"><%= checkbox f, entry %><label><%= entry%></label></div>
                            <%end%>
                        <% end %>
                    </div>
                    <div class="dropdown-item">
                        <%= form_for @changeset, "#", [phx_change: :query], fn _ -> %>
                            <%= text_input(:search, entity) %>
                        <% end %>
                    </div>
                </div>
            </th> 
            <%end%>
            <th scope="col"><%= live_render(@socket, Ui.FormLive) %></th>
        """ 
    end

Post #2

Menkir

I checked in Wireshark the http response and the html contains the <th> tag. By excluding step-by-step the javascript libraries which could be responsible for this bug it seems like live_view itself is causing this issue. I downgraded lv from 3730628ec1404d8a6fa61ed6b10fc52554bf067e to 09b792ad9f85331968cfbc43f8564d6c97495832 and the issue was gone. But it’s only a workaround