Phx-click on field is causing all other fields to reset in new.html.leex LiveView template

phoenix
troubleshooting
liveview
#1

Hey everyone,

so after unsuccessfully trying to use LiveView with phx_change: :validate (topic), i decided to just remove phx_change from my form. This solved the issue of my two complex js-enhanced fields resetting on every change, but the problem i’m having now is that on when i create a new instance of a model (new.html.leex), one of my fields (not the js-enhanced fields, but one which has a phx-click event attached to it) causes all other fields to reset when this event is triggered. So as of now i have no idea how to approach this problem. The only solution i see is replacing the phx-click event with javascript, which i would prefer not to do. Any insights would be greatly appreciated

#2

Can you post the handler for your phx-click?

#3

Of course, here it is

def handle_event("toggle_data_type", state, socket) do
  {:noreply, assign(
    socket,
    data_type: state,
    show: state
  )}
end

I want to preserve all the other input values the user has given, even when this event is triggered (if that’s possible)

#4

Do you use a changeset for the form? I’ve run into a similar problem recently using liveview to allow for dynamically nested forms (like cocoon in rails) and it was caused by not updating the changeset with the changed data(which I do in the validate handler).

Hopefully someone else can give us both some advice on the best way to do this though.

#5

No, i didn’t. The issue i’m having is that using phx_change: :validate is causing my typead.js inputs to reset on every change, which renders them useless. It’s a catch 22, either i use phx_change: :validate and my typehead.js inputs become unusable, or i disable it, but then my phx-click events cause all inputs (in new.html.leex, i.e. no changeset) to reset when the phx-click events are triggered. Been stuck on this problem for weeks now, only option left seems to be to build a react component and use that, but that defeats the purpose of live view.