At work we started a project and it’s the first time we use elixir phoenix (Live View) for backend and front-end. We have used Elixir Phoenix before but only as backend (json api) with a separate react front-end.

Mostly it’s going well, but we have some “issues” on they way. One of them is the following:

When you have a form (see below for some example code snippets) with a select and the options come from an enum with atoms ([:default, :admin]). We wanted to do some conditional rendering based on the select value.

So for example we have the following html form:

    <div>
      <.header>
        <%= @title %>
        <:subtitle>Use this form to manage user records in your database.</:subtitle>
      </.header>

      <.simple_form
        for={@form}
        id="user-form"
        phx-target={@myself}
        phx-change="validate"
        phx-submit="save"
      >
        <.input field={@form[:name]} type="text" label="Name" />
        <.input field={@form[:age]} type="number" label="Age" />
        <.input
          field={@form[:role]}
          type="select"
          label="Type"
          prompt="choose role"
          options={Ecto.Enum.values(User, :role)}
        />
        <p :if={@form[:role].value === :admin}>Only admins can see this</p>
        <:actions>
          <.button phx-disable-with="Saving...">Save User</.button>
        </:actions>
      </.simple_form>
    </div>

We are checking the form value role, when it’s admin we show some the <p>.
When creating an user above will just work fine.

When you have created an user and want to edit it, that’s where the if statement above will stop working. When changing another field than role or change role and and after that change it back to the initial value it the check will break. Because the following happens:
the role value (@form[:role].value) will change from atom to string (:admin will become “admin”).

I know you can easily change the options to strings and do change the role to a string and that is what we are currently doing. But I don’t understand why it behaves like this. I tried to find my answers in the documentation (Phoenix, Live View, Phoenix.HTML, Ecto docs) but could not find out why it behaves like this and if this is intendent behavior.

So my questions are:

• Should we handle conditional rendering differently than this approach (like using assign or something else)?
• Why does it behave like this?

ps

This is my first post, so sorry if it’s not conform the guidelines.
Let me know if it isn’t so I can change it accordingly!