Is it typical behaviour for multiple phx-value-* to require strings?

Questions / Help
, ,
1

Using:

defp deps do
[
#...
{:phoenix, "~> 1.7.7"},
{:phoenix_html, "~> 3.3"},
{:phoenix_live_view, "~> 0.20.1"},
#...
]

When defining a function component that has multiple phx-value-* defined using raw elixir types (e.g. phx-value-id={@element.id}, phx-value-name={@element.name}), only a single value is passed to the handle_event params.

However, if I use raw strings or even string templates(?) (e.g. phx-value-id={"#{@element.id}"} this is not an issue.

Here is my case:

#...
<.button 
          class="btn-error"
          phx-click="toggle-disabled"
          phx-value-id={@element.id}}
          phx-value-disabled={@element.disabled}
          data-confirm="Are you sure?">
    Toggle
</.button>
#...

Passes %{"id" => "1", "value"=>""} to params

Whereas:

#...
<.button 
          class="btn-error"
          phx-click="toggle-disabled"
          phx-value-id={"#{@element.id}"}
          phx-value-disabled={"#{@element.disabled}"}
          data-confirm="Are you sure?">
    Toggle
</.button>
#...

Passes the data as expected. This also works if I only use string literals. phx-value is affected by this as well and stays empty if I define a phx-value-* using an elixir type(? not sure if this is the root cause).

This is defined inside a function component, not a live component. Not sure if that changes this either.

While I have solved my issue by using templates, I’m not sure if this is a bug that should be reported, or expected behaviour.

2

In short, yes.

HTML works only with strings, so any values you put in the DOM must be converted to a string. The behaviour you’re seeing is likely because setting an attribute to something falsey—ie, nil or false—will cause it to not render at all. While I don’t have an example off the top of my head, this is a convenience feature that I make use of quite often! Otherwise, it’s best to make sure your phx-values are explicitly strings if you think they could be fasley.

And welcome to the forums!

1 Like
3

That makes sense and I have indeed noticed I get an error about HTML safe when I try to use a type such as a list.

I see now I misunderstood what was happening here with my issues here. I noticed integers would be converted to strings which had me incorrectly assuming a boolean would, as well.

Thanks for the quick reply, and the conditional rendering is actually something I might start using as well.

1 Like