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: