fabcm1

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

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

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>

Last Post!

bdarla

bdarla

I am not sure that we had the same problem to solve. I only needed a multicolour dropdown element.
Unfortunately, I could not solve it with pure Liveview components. Hence, I opted for javascript based solution via a hook.

Where Next?

Popular in Questions Top

skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

Other popular topics Top

hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

We're in Beta

About us Mission Statement