New Components module from Phoenix 1.7 (input select use case)

Phoenix Forum Questions / Help
,
1

Hi,

I am trying to use the components module that is being developed in Phoenix 1.7 in order to try the new resources from Liveview 0.18 with tailwind.

I can’t figure out what is the syntax of input/1 with type: “select” in the :option slot. It seems very different from the select/4 of Phoenix.HTML.Form. Here is an example that I am trying to make work:

In the heex, inside form, the following renders a select menu:

<%= select(f, :city_id, Enum.map(@cities, fn city -> {city.name, city.id} end)) %>

Now, I try

<.input field={{f, :city_id}} type="select" option={Enum.map(@cities, fn city -> {city.name, city.id} end)} label="choose your city" />

and it fails with

** (Protocol.UndefinedError) protocol Enumerable not implemented for {"CITY NAME", 1} of type Tuple
        (elixir 1.14.0) lib/enum.ex:1: Enumerable.impl_for!/1
        (elixir 1.14.0) lib/enum.ex:166: Enumerable.reduce/3
        (elixir 1.14.0) lib/enum.ex:4307: Enum.reduce/3
        (phoenix_live_view 0.18.2) lib/phoenix_component.ex:762: Phoenix.Component.assigns_to_attributes/2
        ...

thanks in advance,

2

You can use the slot syntax for select inputs:

<.input field={{f, :city_id}} type="select" label="Choose your city">
  <:option :for={city <- @cities} value={city.id}><%= city.name %></:option>
</.input>
5 Likes
3

Update: this syntax is no longer correct. For new projects generated with Phoenix 1.7.0-rc.0, the <.input type="select"/> component uses Phoenix.HTML.Form.options_for_select under the hood. Since commit 2fdb410, you’d use your original snippet with option changed to options:

<.input 
  field={{f, :city_id}}
  type="select" 
  label="Choose your city" 
  options={Enum.map(@cities, fn city -> {city.name, city.id} end)} 
/>
2 Likes
4

Is there any way to pass styling, e.g. different background colour for each option which shall be maintained in the selected option (dropdown functionality)?
I could find how this is possible via Phoenix.HTML.Form.options_for_select .