I have a LiveView with a fairly beefy LiveComponent that renders inside of it. From my understanding of the docs you can pass render_hook/3 the element/2 of a LiveComponent and it should be able to handle the event.

My test LV looks like this:

 <.live_component module={LVTestWeb.ComponentTab}
                      id="component-tab" 
                      location={@location} 
                      user={@current_user} 
                      socket={@socket}/>

ComponentTab:

def render(assigns) do
    ~H"""
      <div class="row d-flex flex-row flex-nowrap" id="component" phx-hook="SortableHook">
      ... inner content ... 
     </div>
    """
  end

 
  def handle_event("reorder", params, socket),
    do: reorder(socket, params)

  @doc false
  @spec reorder(LiveView.Socket.t(), PBG.frontend_params_t()) ::
          LiveView.Socket.t()
  def reorder(socket, params) do
      ... reorder logic 
  end

The test:

   view
    |> element("#machine-schedule")
    |> render_hook("reorder", params)

This is the error:

 ** (FunctionClauseError) no function clause matching in AdminWeb.Liv eViewExample.Index.handle_event/3

From what I understand shouldn’t the event be going to the LV Component and not the parent LV? That’s how it works when users interact with the LV. What am I missing from render_hook/3