I have a custom LiveComponent form input that is built with 3 text inputs: one hidden and 2 visible. The hidden text input holds a duration in minutes for submission of the form. The other inputs are there for the user to interact with in order to modify the hour and minute value. I need to respond to change events of the 2 visible inputs in order to modify the hidden input value in minutes.
What’s the best way to respond to change events on “fake” form inputs like this? I just learned that phx-change events are not implemented for inputs. Thing is, this is a reusable input and I need to be able to break it apart from the normal form. Should I just do this with javascript, or is there a better way to keep it in LiveView?
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.
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, …
https://hexdocs.pm/phoenix_live_view/form-bindings.html#form-events
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
I’ll work on getting an example of using it in LiveView in a sharable state if there is interest.
1 Like
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.
