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.

Answer 1

There are few ways to achieve this:

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

   <div id="test" phx-keydown="keydown" tabindex="0">

2. Using phx-window-keydown , however this will make the handle global:

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