Button inside form reloads the entire view

Questions & Help Questions
, , ,
1

Hello,
I have a page that consists of several user inputs and buttons.
For real-time validation (as well as updating character count) I am using form, but only phx-change, no phx-submit.

My page structure looks roughly like this:

<div class="max-w-5xl">
  <h1 tag here>
  <form phx-change="change_form">
    <%= if some_condition?() do %>
        <textarea> with some styling
       <button phx-click="event_one">Next 1</button>
    <% else %>
      <textarea> with practically the same styling
      <button phx-click="event_two">Next 2</button>
    <% end %>
  </form>
</div>

Pressing Next 1 button updates the state in such a way that some_condition would be fulfilled, and the second text area and Next 2 button would be displayed.
This works without any issues.

The Next 2 button is exactly the same as the first one, and after pressing it similar handle_event function is called.

The problem is that whatever I do (

  • handle_event does have some logic;
  • handle_event immediately returns {:noreply, socket};
  • Next 2 button does not have phx-click at all
    )
    pressing the button reloads the entire page.
    It does send phx-click event (except when I tried removing it), but then console immediately prints [info] GET /my-endpoint, the socket is reconnected, mount is called and the state of the page is reset.

I noticed one thing: if I remove this second button out of the form, it stops acting out. But no problem ever happens with the first button.

Please advise me on what am I missing here.