Upgrading to Phoenix LiveView 0.8.0 results in keyboard events not getting fired anymore

Questions / Help
,
1

I just saw that liveview 0.8.0 was released so I decided to migrate my pet project that I built using 0.4.0 to the latest version. The project compiles but for some reason my keyboard events stopped working.

This PR has the changes I’ve made so far to upgrade the project.

My guess is that the API changed somehow, but I can’t find how exactly.
This is my template:

<div phx-keydown="keydown" phx-target="window" class="game-field"> 
    ...
</div>
...

And this my *_live file:

def handle_event("keydown", %{"key" => "Escape"}, socket) do
    new_socket =
      case socket.assigns do
        %{state: :paused} ->
          continue_game(socket)
        %{state: :playing} ->
          pause_game(socket)
        _ ->
          socket
      end
    {:noreply, new_socket}
  end
2

As a brief note, do make sure to rm -rf node_modules and npm install after doing a live view upgrade to make sure you get the updated javascript. Maybe that’ll help?

3

think the api changed to phx-window-keydown (instead of your combination of phx-keydown="keydown" phx-target="window" ) see https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-key-events

4 Likes
4

That’s it. Thank you so much

1 Like