Phx-change on input themselves

Hello everybody,

I have a form with many inputs..
One of those inputs (for example a date or a quantity) affects for example a total price. I wanted to display that estimated price only when the inputs related to the price are changing.

Using phx-change at the form level will trigger so many events because of all the other inputs (I don’t even think for textarea being typed) and I don’t want that. And using debounce will make me lose the reactivity I want for the only fields related to the total.

Using phx-blur on those input works, but the user needs to leave those input fields which may not occurs immediately particularly when using for example the built-ins arrows for numeric input fields, or when manipulating the built-ins calendars.

Am I the only one who don’t understand why phx-change doesn’t apply for inputs themselves only?

If I should bring some JS in order to do that, I lose the main purpose of why I want to use Live View…

Anyway, is there some kind of workaround I can do?

I thought of making many little forms (at least for the fields participating to the total), but I’m using a changeset.
Currently, when I’m using phx-blur, I’m updating the changeset in which there is both the total and the related quantity or date fields. So upon the render, I have nothing to do.
So I want to keep the whole changeset based form.

I even tried to nest the inputs field within a bare <form phx-change> ... </form>..
But indeed it’s not correct HTML, and the form doesn’t even display in the source..

4 Likes