Phoenix doesn't show errors in all multi step form

allanegidio · November 14, 2022, 1:57pm

Hello guys.

I’ve been having some trouble to understand this behaviour about liveview, live_flash and multi step forms.
It would be great if someone could be able to explain why this is not working.

I create a Multi step form on live view to test how it works and reach what I expected.

At first time, I want form be fullfilled without show any error.
Only show can’t be blank errors when I submit the form on step 3

I followed the documentation and had success in my implementation but there’s one thing that I was not able to understand. I’m trying to not depends of class css “alert” in my live_flash so in this case I added this clause “if” in my live.html.heex

github.com

allanegidio/multi_step_form/blob/main/lib/multi_step_form_web/templates/layout/live.html.heex

<main role="main" class="container">
  <%= if info = live_flash(@flash, :info) do %>
    <p class="alert alert-info" role="alert"
      phx-click="lv:clear-flash"
      phx-value-key="info"><%= info %></p>
  <% end %>
  <%= if error = live_flash(@flash, :error) do %>
    <p class="alert alert-danger" role="alert"
      phx-click="lv:clear-flash"
      phx-value-key="error"><%= error %></p>
  <% end %>

  <%= @inner_content %>
</main>

Because of this “if” in live.html.heex my multi-step-form right now needs to be submitted two times to show erros in all steps. If a go to step 3 and submit at first time, errors only show on step 3 and if I go back to step 2 or 1 nothing will be showed.
If I remove this clause, everything works ok but I really would like to understand why.

To reproduce you can do:

Install dependencies with mix deps.get
Create and migrate your database with mix ecto.setup
Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server
Open localhost:4000/multi-step-form
Go to step 3 and submit only once the form and go back to step 2 or 1 to see that only step 3 show errors.
Refresh page and go to step 3 and submit form two times and go back to step 2 or 1 and see everything works normally.

Someone can understand why this is happening just because of this “if” clause on live.html.heex?

@update

I created another project using Phoenix 1.7 and I got the same error using everything default.
Maybe I made some mistake? I can’t understand why it’s only works normally if I do two submits.

to reproduce you can do the same above on version 1.6