Nested LiveView doesn't work in table

[ruudk]

Environment

• Elixir version (elixir -v): Elixir 1.8.2 (compiled with Erlang/OTP 21)
• Phoenix version (mix deps): Latest master #90d240f
• NodeJS version (node -v): v10.15.2
• NPM version (npm -v): 6.9.0
• Operating system: macOS

Actual behavior

I render my liveview like this:

<table>
        <%= for item <- section.items do %>
            <%= live_render(@socket, AppWeb.Live.Checklist.TaskRow, container: {:tbody, []}, child_id: item.id, session: %{account: @account, user: @user, checklist: @checklist, item: item}) %>
        <% end %>
</table>

As you can see, I use the container property to prevent the creation of a <div> inside <table>.

The problem is that static_render,disconnected_nested_static_render and connected_nested_static_render always create <div class="phx-loader"></div>.

The JS lib uses

phoenix_live_view/assets/js/phoenix_live_view.js

Line 680 in 93c5611

this.loader = this.el.nextElementSibling

to find that loader and that doesn't work when it's a div (as it's invalid to have a div inside a table).

When I change the <div> in static_render,disconnected_nested_static_render and connected_nested_static_render to this:

<%= Phoenix.HTML.Tag.content_tag(tag, "", [class: "phx-loader"]) %>

it continues.

The HTML is valid, but now the first load from the Websocket removes the <tr> and produces invalid HTML again:

There is no <tr> tag anymore:

Expected behavior

LiveView doesn't play nicely when the LV is a table row. I think it's a common usecase for LV's.

[chrismccord]

This will be fixed soon, when the pushstate stuff lands where I have updated the loader to use the existing container and css pseudo elements. Thanks!

[chrismccord]

Dup of #193