Phoenix liveview checkboxes are not updated (the UI)

I think you’re going to need an id and/or name on those check boxes at least.

They went missing when I pasted, I have them (I am going to edit the original post)

I faced the same issue few weeks ago. My checkboxes were inside a phx-update="stream". In that case, the inner block is not updated, and this is the expected behaviour. Is it your case ?

Nope, no phx-update attr at all.

Do you have a form defined around those or not? Can you show a more complete set of code?

No, there’s no form around those.

Here is the whole snippet:

<div class="flex">
  <h4 class="pr-4"><%= dgettext("oha", "Visible columns") %></h4>
  <button
    type="button"
    phx-click="make-all-columns-visible"
    phx-target={@myself}
  >
    <span class="text-primary font-normal">(<%= dgettext("oha", "select all") %>)</span>
  </button>
</div>
<%= for col <- @all_columns, elem(col, 1) != :actions do %>
  <label class="custom-checkbox mt-2">
    <input
      type="checkbox"
      id={"col-#{elem(col, 1)}"}
      name="col"
      class="col-visibility-checkbox"
      phx-click="set-columns-visibility"
      phx-value-column={elem(col, 1)}
      phx-target={@myself}
      checked={col_checked?(col, @columns)}
    />
    <span/>
    <span><%= elem(col, 0) %></span>
  </label>
<% end %>

This is the col_checked? function

defp col_checked?(col, columns) do
  Enum.find_value(columns, false, fn c -> elem(c, 1) == elem(col, 1) end)
end

I have to mention that when the make-all-columns-visible event is handled, the table in the page really show all the columns, only the checkboxes are not updated.

Just to sense check, you are updating the @all_columns assign and putting the updated value back in the socket assigns right?

Since its a component, are the checkbox values getting passed in from a parent? Perhaps there is a value sync issue there?

Umm @all_columns does not change. Doesn’t need to change TBH. So maybe that’s why my checkboxes aren’t re-rendered? The comprehension is simply ignored?

Is there any way around this?

Cheers!

Ah sorry, I miscomprehended the comprehension.

There is a erroneous <span/> tag in the code above, but probably just copy paste bug, I dont think heex would compile as given, probably not the issue.

If @columns is changing, then it will re-render, so I suspect the updated value isn’t getting propagated to the checkbox component.

Is @columns owned by the component or the parent view? Who is updating it (the checkbox component or the parent view?) when things are toggled (sounds like its the component by the first post)? Are the checkboxes in the same component as the table? Is it possible that Component#update(assigns, socket) is getting called and re-initialising the @columns to some stale?

I guess I would also check another browser just to be sure its not a odd sticky-html-quirk.

I believe this is valid heex, equivalent to <span></span> (90% sure :))

Yes, @columns is changing, but it is inside a comprehension where @all_columns is not changing.
I can confirm @columns is changing because it is used to show and hide table columns (and it’s working fine).

@columns is passed to this component from the parent view, the first time I assign it to @all_columns and then the checkboxes updates @columns.

Tried on other browsers with no luck.