Non-input component updating an input in a form

Questions / Help
2

Here’s a generic client side hook for controlling inputs that can be triggered via JS.dispatch, one of LiveView’s built in JS Commands:

let Hooks = {}
Hooks.ControlledInput = {
  mounted() {
    this.el.addEventListener("setValue", e => {
      this.el.value = e.detail
      this.el.dispatchEvent(new Event("input", {bubbles: true}))
    })
  }
}
let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, ...})

<.input field={@form[:pin_id]} type="number" id="pin_id" label="Pin" phx-hook="ControlledInput" />

<.table
  id="pin-table"
  rows={@streams.pin_collection}
  row_click={fn {_id, pin} -> JS.dispatch("setValue", to: "#pin_id", detail: pin.id) end}
>

Also see:

2 Likes