Strange behaviour of Live-View rendering

Phoenix Forum Questions / Help
, ,
1

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)?
2

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

3

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
4

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 :thinking:

1 Like
5

I’ve created a Bug Report on Github. For those of you who want to be up to date: https://github.com/phoenixframework/phoenix_live_view/issues/282

1 Like