Phx-update="ignore" not working on checkbox inside changeset form

Phoenix Forum Questions / Help
, ,
1

I have a typical form to enter values for a changeset. The form takes the begin_date and end_date for an event. I want to inject a checkbox into the form that allows the user to tell me if the event begins and ends on the same date.

I can’t get that checkbox to raise it’s own handle_event. It keeps invoking the form’s phx_change=“validate”. I saw a post by @sfusato that mentioned using phx-update=“ignore” inside the input element as a way to get the element to bypass phx_change … but I can’t get it to work.

I tried wrapping the checkbox inside an independent but that didn’t work either. Phx_chage=“validate” still got invoked. What am I doing wrong?

<.form
        let={f}
        for={@changeset}
        id="event-form"
        phx_change="validate"
        phx_submit="save">

...
<input type="checkbox" name="same-day" id="same-day" phx-update="ignore" phx_click="same_day_event" value="true" checked>

 <div><%= label f, :datetime_begin, "Begin Event:", class: "blah" %></div>
 <div><%= skl_datetime_select f, :datetime_begin, default: @current_date %></div>
<div><%= label f, :datetime_end, "End Event:", class: "blah" %></div>
<div><%= skl_datetime_select f, :datetime_end, default: @current_date %></div>

...
</.form>
2

You can handle change events from individual elements in the latest (0.17.9) version of LiveView.

See: Form bindings — Phoenix LiveView v0.17.9

<.form let={f} for={@changeset} phx-change="validate" phx-submit="save">
  ...
  <%= label f, :county %>
  <%= text_input f, :email, phx_change: "email_changed", phx_target: @myself %>
</.form>
1 Like
3

That worked!!! Thank you so much @cmo !

One change that I’ll mention for others who might see this post: I had to remove phx_target: @myself because this was being called inside a LiveView versus inside a component.

4

UPDATE for anyone who reads this post:

I’m going to post this as the solution to show some additional tweaks to get this to work, but be sure to read the post from CMO because that provides a critical part of this solution.

The final piece of code that works is this:

<%= checkbox f, :same_date, phx_update: "ignore", phx_change: "same_date_selected", checked_value: "true" %>

CHANGES:

  1. I made the change mentioned below where I removed phx_target: @myself because this is in a LiveView
  2. I added phx_update: “ignore” to avoid a weird behavior where the checkbox only works on the second click. This was the solution I found from @sfusato in another post. Here is the post that explains the race condition created if you don’t include phx_update: “ignore”
2 Likes