Phoenix LiveView - Trigger validate function on hidden inputs

Questions / Help
, , ,
1

Hi,

I am developing this multi-select component in Phoenix LiveView, and I want the validate function of the form to be triggered when this hidden input changes, I decided to go with a JS hook, but the hook doesn’t seem to get triggered, any idea what’s wrong here?

<%= for option <- @selected_value do %>
          <span class="<class>">
            <%= option %>
            <a
              class="<class>"
              phx-target={@myself}
              phx-click="delete"
              phx-value-name={option}
              phx-value-index={@form.index}
            >
              <span class="material-icons text-base px-2">delete</span>
            </a>
          </span>
          <%= hidden_input(@form, @field,
            name: "#{@form.name}[#{@field}][]",
            value: option,
            phx_hook: "PublishInput"
          ) %>
        <% end %>

Hooks.PublishInput = {
    updated() {
        console.log("updated")
      this.el.dispatchEvent(
        new Event("input", {bubbles: true})
      )
    }
  }
2

The hooks update() function is triggered when LV updates the markup. All the hooks functions are about the LV rendering lifecycle of the element. You’d likely want to hook into whatever changes your inputs value on mounted().

1 Like