How might I register a change event for a custom complex form input?

Imo the cleanest, but not necessarily most trivial, solution would be a webcomponent, which acts like a native input – e.g. emits change/input events for phoenix to pick up. This would also be a place to handle the two separate inputs fields modeled with a single value.

No but key events are!

You may wish for an individual input to use its own change event or to target a different component. This can be accomplished by annotating the input itself with phx-change, …

Have tried using it on the input itself as outlined but I’m getting some strange params with the event.
%{"_target" => ["undefined"]}. Any idea why the value is not coming through?

 <input
  type="number"
  min="0"
  max="24"
  class="w-[1ch] text-shady-white caret-bright-purple border-none bg-transparent focus:ring-0 p-0"
  phx-change="modify_duration"
  phx-target={@myself} />

Well I’ll be. I haven’t RTFM’d those parts in a while.

You got no name on the input.

This sounds like an ideal use case for a form associated custom element. This is a web component that takes advantage of some apis (well supported in all the browsers by now) that allow it to behave like an actual form input, binding it’s values to the form and such. Since your element is an actual form input all of the normal phx form events should work properly.

I’ve been working on something similar you might be able to use as an example: a more self-contained autocomplete element that binds its value directly to the form rather than requiring hidden input shenanigans. It’s a working but not as well documented yet as I would like, but feel free to hit me up with questions.

Here’s the element itself: GitHub - launchscout/autocomplete-input: An event oriented, autocomplete form associated custom element · GitHub

I’ll work on getting an example of using it in LiveView in a sharable state if there is interest.

You could also just write a hook that sends events to the server, which is sufficient for a lot of simple controls like this. You could even update the hidden input’s value in JS and send nothing at all.

However - and maybe I’m misunderstanding something here - in this case could you not just send the hours/minutes to the server and then perform the (h * 60) + m upon form submission? The value is hidden, so it’s not like the user needs to be able to see it. Why include it at all?

For anyone coming to this later, I opted for a custom element. Right now it’s in vanilla JS but I don’t like all the boilerplate so I’m going to turn it into a Lit component at some point.