Phx-change on input themselves

You can pattern match based on the input that triggered the phx-change action.

Example from the docs:

For example, if the following input triggered a change event:

<input name="user[username]"/>

The server’s handle_event/3 would receive a payload:

%{"_target" => ["user", "username"], "user" => %{"username" => "Name"}}

Then you can have the following callbacks defined:

def handle_event("phx_change_action", %{"_target" => ["user", "username"], "user" => %{"username" => username}}, socket) do
... handle logic when username is changed
end

def handle_event("phx_change_action", %{"_target" => ["user", "quantity"], "user" => %{"quantity" => quantity}}, socket) do
... handle logic when quantity is changed
end

…and so on…

You can achieve a per input change like this. The idea is that you are not forced into only one handle_event callback. You can achieve the level of granularity that you wish by simply pattern matching on the payload.

Thank you for your input,

In fact I did exactly that so the problem was not really to be able to find the correct input I’m interested in.
But rather the fact that every keystroke on all the other inputs (I’m not interested in) triggers a WS roundtrip (or at least a one way trip).
I’m testing locally (so without really any network latency) and after a couple of fields, the keystrokes or not smooth anymore at all. I mean the text inputs lag a lot. Which is not acceptable.

Using debounce can help, but I’m don’t want to have a debouncing timeout for the couple of fields I’m interested in. It will make the purpose of live-updating the live-calculation useless.

In the meantime, I’ll try with some JS to see if I can end-up with something that works well…

The debounce is set per input. For the inputs that you want to ignore for the phx-change action, set it to blur and have the handle_event callback pattern match those (or pattern match those you’re interested in instead and have a catch-all that ignores everything else) and simply return the unmodified socket in that case.

I forgot (or even didn’t really notice) the blur option.
Indeed, this way, I was able to get the behavior I want..

Thanks for the insight..

Now I can ditch all that spaghetti JS I wrote