fix(contact-map): wrap callsign filter in form, add Filter button

Bare-input phx-change wasn't reliably delivering the value to the
filter_callsign handler. Wrapping the input in a form with phx-submit
+ a Filter button gives explicit submission (Enter or click) on top
of the existing debounced live filter.

lib/microwaveprop_web/live/contact_map_live.ex

@@ -104,17 +104,21 @@ defmodule MicrowavepropWeb.ContactMapLive do
             </div>
 
             <div id="panel-extras" class="hidden flex-col gap-2">
-              <input
+              <form
-                type="text"
+                phx-submit="filter_callsign"
-                placeholder="Filter callsign..."
-                phx-keyup="filter_callsign"
-                phx-key="Enter"
                 phx-change="filter_callsign"
-                phx-debounce="300"
+                phx-debounce="500"
-                name="callsign"
+                class="flex gap-1"
-                value={@callsign_filter}
+              >
-                class="input input-xs w-full"
+                <input
-              />
+                  type="text"
+                  placeholder="Filter callsign..."
+                  name="callsign"
+                  value={@callsign_filter}
+                  class="input input-xs flex-1 min-w-0"
+                />
+                <button type="submit" class="btn btn-xs btn-primary">Filter</button>
+              </form>
 
               <div class="flex items-center justify-between">
                 <span class="text-xs font-bold">Bands</span>
@@ -195,17 +199,21 @@ defmodule MicrowavepropWeb.ContactMapLive do
           </div>
 
           <%!-- Callsign filter --%>
-          <input
+          <form
-            type="text"
+            phx-submit="filter_callsign"
-            placeholder="Filter callsign..."
-            phx-keyup="filter_callsign"
-            phx-key="Enter"
             phx-change="filter_callsign"
-            phx-debounce="300"
+            phx-debounce="500"
-            name="callsign"
+            class="flex gap-1"
-            value={@callsign_filter}
+          >
-            class="input input-sm w-full"
+            <input
-          />
+              type="text"
+              placeholder="Filter callsign..."
+              name="callsign"
+              value={@callsign_filter}
+              class="input input-sm flex-1 min-w-0"
+            />
+            <button type="submit" class="btn btn-sm btn-primary">Filter</button>
+          </form>
 
           <%!-- Band checkboxes --%>
           <div class="flex items-center justify-between px-1">

test/microwaveprop_web/live/contact_map_live_test.exs

@@ -63,11 +63,13 @@ defmodule MicrowavepropWeb.ContactMapLiveTest do
       {:ok, lv, _html} = live(conn, ~p"/contacts/map")
 
       html =
-        render_change(
+        lv
-          # There's a mobile and a desktop filter — just grab the desktop one.
+        # There's a mobile and a desktop filter form — submit via the
-          element(lv, ~s(input.input-sm[phx-change="filter_callsign"])),
+        # desktop one (input.input-sm lives only inside the desktop form).
-          %{"callsign" => "  W5ISP  "}
+        |> form(~s|form[phx-submit="filter_callsign"]:has(input.input-sm)|,
+          callsign: "  W5ISP  "
         )
+        |> render_submit()
 
       # Server stored the trimmed value in assigns, which round-trips
       # back through the `value=` attribute.
@@ -78,14 +80,24 @@ defmodule MicrowavepropWeb.ContactMapLiveTest do
       {:ok, lv, _html} = live(conn, ~p"/contacts/map")
 
       html =
-        render_change(
+        lv
-          # There's a mobile and a desktop filter — just grab the desktop one.
+        |> form(~s|form[phx-submit="filter_callsign"]:has(input.input-sm)|,
-          element(lv, ~s(input.input-sm[phx-change="filter_callsign"])),
+          callsign: "   "
-          %{"callsign" => "   "}
         )
+        |> render_submit()
 
       refute html =~ ~s(value="   ")
       assert html =~ ~s(value="")
     end
+
+    test "renders a Filter button next to the callsign input", %{conn: conn} do
+      {:ok, lv, _html} = live(conn, ~p"/contacts/map")
+
+      assert has_element?(
+               lv,
+               ~s|form[phx-submit="filter_callsign"] button[type="submit"]|,
+               "Filter"
+             )
+    end
   end
 end