I have what seems to be a simple problem to solve in a LiveView form, but for some reason I’m having trouble. It could be one of those old-fashioned brain fevers.

I have a boolean form input which, when toggled to true, should cause a secondary input to display so the user can enter details. It’s not this, but you can imagine that it is.

Toggle for question: Are you some kind of magical beast? reveals secondary input: Please describe your sweet powers. User has input: Breathing fire and accurately estimating budget categories710×169 8.7 KB

For the second input, I’m doing something like:

    <.input
      :if={@show_powers_input}
      field={@form[:powers]}
      type="text"
      label={gettext("Please describe your sweet powers")}
    />

So I just need to toggle @show_powers_input appropriately and I’m all set.

My first try was to use a phx-change, but that’s not optimal because it doesn’t make the second input appears as soon as the first one is modified; the user has to tab away from the first input to trigger the change event.

It seems like what I really want is the input event. According to CanIUse:

The input event is fired when the user changes the value of an <input> element, <select> element, or <textarea> element. By contrast, the “change” event usually only fires after the form control has lost focus.

Aside: if I’m understanding correctly, phoenix.js binds to both the ‘change’ and the ‘input’ event, but I don’t see the latter doing anything.

OK, so maybe I can use a hook to bind to input and trigger change, then let LiveView do its normal thing? I tried phx-hook="ChangeOnInput" with

    this.el.addEventListener("input", e => {
      console.log("hey an input", e);
      e.target.dispatchEvent(new Event('change', { 'bubbles': true }));
    })

… and while I do see my console log message, I still don’t get any event in my LiveView until the <select> loses focus.

What am I missing here?