Close band dropdown after selection by shifting focus to map

lib/microwaveprop_web/live/map_live.ex

@@ -28,8 +28,8 @@ defmodule MicrowavepropWeb.MapLive do
   end
 
   @impl true
-  def handle_event("select_band", %{"value" => band_str}, socket) do
-    band = String.to_integer(band_str)
+  def handle_event("select_band", %{"value" => band}, socket) do
+    band = if is_binary(band), do: String.to_integer(band), else: band
     scores = Propagation.latest_scores(band, socket.assigns.bounds)
 
     socket =
@@ -105,8 +105,10 @@ defmodule MicrowavepropWeb.MapLive do
           >
             <li :for={band <- @bands}>
               <button
-                phx-click="select_band"
-                value={band.freq_mhz}
+                phx-click={
+                  JS.push("select_band", value: %{value: band.freq_mhz})
+                  |> JS.dispatch("click", to: "#propagation-map")
+                }
                 class={[if(@selected_band == band.freq_mhz, do: "active")]}
               >
                 {band.label}

test/microwaveprop_web/live/map_live_test.exs

@@ -31,13 +31,10 @@ defmodule MicrowavepropWeb.MapLiveTest do
   end
 
   describe "select_band" do
-    test "updates selected band on click", %{conn: conn} do
+    test "updates selected band on event", %{conn: conn} do
       {:ok, lv, _html} = live(conn, ~p"/map")
 
-      html =
-        lv
-        |> element("button[value='24000']")
-        |> render_click()
+      html = render_click(lv, "select_band", %{"value" => 24_000})
 
       assert html =~ "24 GHz"
     end