Error in phoenix_live_view.js -- radio button not updating assigns in liveview

Phoenix Forum Questions / Help
, ,
1

I have an issue with a Live Component that is causing me to tear my hair out, but unfortunately an MRE is difficult to construct. I have a set of radio buttons that are created dynamically in a LiveComponent, as such:

                <%= for error <- sorted_errors(@selected_task.errors) do %>
[[ snip other table divs ]]
                    <div class="p-2 text-center text-dyadblue-dark text-xs">
                        <input
                            name="<%= "check-#{error.id}" %>""
                            type="radio"
                            class="text-dismissedred focus:ring-0 focus:ring-offset-0"
                            phx-click="set_not_actioned"
                            phx-value-value=<%= false %>
                            phx-value-errorid="<%= error.id %>"
                            phx-target="<%= @myself %>"
                            <%= if !is_nil(error.actioned) and !error.actioned do %> checked <% end %>
                        />
                    </div>
                    <div class="p-2 text-center text-dyadblue-dark text-xs">
                        <input name="<%= "check-#{error.id}" %>"
                            type="radio"
                            class="focus:ring-0 focus:ring-offset-0"
                            phx-click="set_actioned"
                            phx-value-value=<%= true %>
                            phx-value-errorid=<%= error.id %>
                            phx-target="<%= @myself %>"
                            <%= if !is_nil(error.actioned) and error.actioned do %> checked <% end %>
                        />
                    </div>
[[ snip...]
                <% end %>

I’m trying to use the number of radio buttons in the checked state to dynamically change the styling on a button, but I get the following behaviour: when I click a radio button in the right hand group of radio buttons, the assign I’m using to track the number of actioned items is updated. When I click a radio button in the left hand group of radio buttons, the assign is not updated until I click another right hand button, no matter what I do, and so the checked state isn’t applied until I click another right hand group button.

I’ve even put divs printing out each set of values in the page, and Phoenix dutifully updates the right hand group and then won’t update the left hand group until I click one of the right hand groups. It’s like the assigns for the left hand group are stuttering.

(I’m sorry, I would upload a photo to make that clearer, but apparently I’m too new.)

I’ve been up and down the Elixir code, and I can’t see how the problem is occuring (especially because the code updating the assigns is for both left and right is shared between the same helper function, just switched on a boolean value). However, I do have one lead: when I click the right hand buttons, the JS console in the browser is clear, but when I click any of the left hand buttons, I get the following JS error:

phoenix_live_view.js:1900 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '"' is not a valid attribute name.
    at Object.mergeAttrs (webpack-internal:///../deps/phoenix_live_view/priv/static/phoenix_live_view.js:1900:33)
    at Object.mergeFocusedInput (webpack-internal:///../deps/phoenix_live_view/priv/static/phoenix_live_view.js:1909:46)
    at onBeforeElUpdated (webpack-internal:///../deps/phoenix_live_view/priv/static/phoenix_live_view.js:2114:192)
    at T (webpack-internal:///../deps/phoenix_live_view/priv/static/phoenix_live_view.js:178:24)
    at eval (webpack-internal:///../deps/phoenix_live_view/priv/static/phoenix_live_view.js:202:211)
    at T (webpack-internal:///../deps/phoenix_live_view/priv/static/phoenix_live_view.js:225:12)
    at eval (webpack-internal:///../deps/phoenix_live_view/priv/static/phoenix_live_view.js:202:211)
    at T (webpack-internal:///../deps/phoenix_live_view/priv/static/phoenix_live_view.js:225:12)
    at eval (webpack-internal:///../deps/phoenix_live_view/priv/static/phoenix_live_view.js:202:211)
    at T (webpack-internal:///../deps/phoenix_live_view/priv/static/phoenix_live_view.js:225:12)

I’m happy to post more of the Elixir code, but I feel like this is the right place to start. The issue is, I have no idea how to unpack and debug this issue with phoenix_live_view.js. Is there any place I can start?

2

In the miniscule chance that anyone else ever lands here on something similar, the answer to this is a complete :man_facepalming:, and you can see the problem above on l. 5 of the excerpt:

name="<%= "check-#{error.id}" %>""

The errant extra set of quotation marks at the end are what caused the error, and removing them solved it.

3 Likes
3

We’ve all been there :slight_smile:

1 Like
4

Just in case anyone else arrives here after searching for the Javascript exception, I just spent all morning trying to debug a similarly mysterious issue. I had several blocks of HTML inside <%= if @foo %> blocks, and when an event triggered by a phx-submit caused foo to become non-nil, one of them caused LiveView’s javascript to raise Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': 'bar<' is not a valid attribute name (I’m so used to LiveView “just working” that I spent far too long assuming something was silently failing in my Elixir code before it occurred to me to check the browser console).

I’m still not entirely sure why, but finding the problematic element and giving it an id seems to have solved it.

1 Like