fabcm1
New Components module from Phoenix 1.7 (input select use case)
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,
Marked As Solved
DecoyLexi
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)}
/>
Also Liked
DecoyLexi
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>
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








