Does anyone know what could cause the following behavior: I have a live view template and in it I conditionally render a form (based on the value inside the socket assigns).
<%= if length(@users) > 0 do %>
...
<% end %>
When the length changes, it used to render a form, but now nothing happens. If I prepend that first line with, say, a tag <p><%= length(@users) %></p> Everything (showing the form dynamically based on the length of @users list) works as expected. I am pretty sure the code worked as is a few weeks ago before I updated to the latest Live View (but I’m not even sure it’s an issue with Live View), among other packages. Am I missing some new behavior introduced recently or is there something else I’m not doing correctly?
The following code “fixes” the problem (I could make that paragraph tag hidden). But… I wonder why this is happening at all and what exactly changed after the update. Went through the changelog in LiveView (I was running 0.10.0 prior to updating to 0.12.1), but found nothing related to my issue.
<p><%= length(@users) %></p>
<%= if length(@users) > 0 do %>
...
<% end %>
Enum.any?(@users) is probably more idiomatic. But none of that should affect whether or not the page updates. @kminevskiy be sure to check the rendered page for HTML validity, if the HTML is invalid this can negatively affect morphdom’s ability to handle updates.
Can you provide more code? Maybe IO.inspect(@users) in the template and see if the output is what you expect?
I remember a few days ago, after I updated the LiveView package, I started the app as usual and was surprised that I couldn’t see the form. Spent some time and through trial and error I found that weird behavior.
IO.inspect(@users) returns a list of maps. Nothing special about it. Plus, I don’t render it in the form - I simply check the length of it and render the form based on the length.
You can put an IO.inspect or something in your form template to make sure it’s called. If it isn’t, one thing to check is that your rendering function is pure, it shouldn’t load users from DB for instance, otherwise Phoenix’s change tracking can’t tell that it changed and won’t re-render it. It still worked on 0.10 but 0.11 is better optimized so it actually matters now.
(BTW, there’s an Enum.empty? function - for lists it checks if list == [] which is as efficient as it gets)
If I put IO.inspect inside the template, it does properly return a list of users (and it gets updated on events). So the list is populated correctly. I guess I’ll keep digging and trying things.
Maybe you could try the master branch. I encountered a fairly similar problem with content disappearing that Chris McCord has fixed on the master branch. I think it is this changelog entry: “Fix component innerHTML being discarded when a sibling DOM element appears above it, in cases where the component lacks a DOM id”
If I add <p><%= Enum.any?(@users) %></p> above the conditional, everything works as expected (first false is being rendered and then, once an event happens, it switches to true and the form inside the conditional is rendered).
So far, I’ve checked the following:
The render function receives pre-computed value (it’s not calculating it on the fly).
IO.inspect/1 actually renders the list correctly.
HTML tags appear to be correct.
Let me know if there’s anything else I could try.
A quick update: it doesn’t look like I can reproduce this bug (?) on a new installation. I suppose it’s specific to my project and I’ll have to debug on my own. I’ll post the solution in this thread.
I had a similar issue with conditional rendering with liveview. I posted an issue but I just haven’t had enough time to create a reproduction repo publically (client project). In my case it seemed like it might be related to a nested liveview inside a conditional in a liveview template. Still don’t have a fix for it, I just changed the way I was rendering things to work around needing the if statement. I’ll post here if I do figure it out.
Interesting. Do you know / remember if that was the behavior specific to a certain (earlier) release of LiveView? As I mentioned above, I haven’t had any issues with 0.10.0, but after upgrading to 0.11 (and then to 0.12.x) I encountered the aforementioned issue.
This might not help in this particular case, but I recently learned that a template gets rendered and send over the websocket connection every time the socket assigns are changed when it isn’t in the .leex format, so when it is a .eex file. Just changing all file formats to .leex reduced the websocket traffic by a lot! So, whenever you do <%= render "my_template.html", assigns %> inside a template, make sure that my_template is of the format .leex
