handle_event not working for Phoenix LiveView example

Question

https://github.com/katpavan/liveview-testapp/blob/master/lib/liveviewapp_web/live/foo_live.ex

foo_live.ex :

defmodule LiveviewappWeb.FooLive do
  use LiveviewappWeb, :live_view
  require Logger


  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, msg: "this is a message", results: %{})}
  end

  def render(assigns) do
    ~L"""
    <h1>Hello</h1>
    <div phx-keydown="keydown" phx-target="window">
    <%= @msg %>
    </div>      
    """
  end

  def handle_event("keydown", %{"key" => key}, socket) do
    Logger.debug "Var value: #{inspect(key)}"
    {:noreply, assign(socket, msg: key)}
  end
end

this is what I see when I goto the page. But when I click on the text in the div and type, the handle_event doesn't fire.

have you tried to use without target? target is used to target another liveview. — Daniel, Oct 08 '20 at 06:32
https://github.com/katpavan/liveview-testapp/blob/master/lib/liveviewapp_web/live/foo_live.ex — Pavan Katepalli, Oct 08 '20 at 06:56

score 1 · Accepted Answer · answered Oct 08 '20 at 07:29

There are few ways to achieve this:

Setting tabview=0 to div, refer to this answer for more details:

<div id="test" phx-keydown="keydown" tabindex="0">
Using phx-window-keydown, however this will make the handle global:

<div id="test" phx-window-keydown="keydown">

handle_event not working for Phoenix LiveView example

1 Answers1