From 01341d20f30fe355ea05debbc26bae8298a9e7c4 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Sun, 3 May 2026 09:54:44 -0500
Subject: [PATCH] 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.
---
 .../live/contact_map_live.ex                  | 48 +++++++++++--------
 .../live/contact_map_live_test.exs            | 28 +++++++----
 2 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/lib/microwaveprop_web/live/contact_map_live.ex b/lib/microwaveprop_web/live/contact_map_live.ex
index fe32ae7a..3089ab83 100644
--- a/lib/microwaveprop_web/live/contact_map_live.ex
+++ b/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
-                type="text"
-                placeholder="Filter callsign..."
-                phx-keyup="filter_callsign"
-                phx-key="Enter"
+              <form
+                phx-submit="filter_callsign"
                 phx-change="filter_callsign"
-                phx-debounce="300"
-                name="callsign"
-                value={@callsign_filter}
-                class="input input-xs w-full"
-              />
+                phx-debounce="500"
+                class="flex gap-1"
+              >
+                <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
-            type="text"
-            placeholder="Filter callsign..."
-            phx-keyup="filter_callsign"
-            phx-key="Enter"
+          <form
+            phx-submit="filter_callsign"
             phx-change="filter_callsign"
-            phx-debounce="300"
-            name="callsign"
-            value={@callsign_filter}
-            class="input input-sm w-full"
-          />
+            phx-debounce="500"
+            class="flex gap-1"
+          >
+            <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">
diff --git a/test/microwaveprop_web/live/contact_map_live_test.exs b/test/microwaveprop_web/live/contact_map_live_test.exs
index 4523dbc2..69f068c5 100644
--- a/test/microwaveprop_web/live/contact_map_live_test.exs
+++ b/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(
-          # There's a mobile and a desktop filter — just grab the desktop one.
-          element(lv, ~s(input.input-sm[phx-change="filter_callsign"])),
-          %{"callsign" => "  W5ISP  "}
+        lv
+        # There's a mobile and a desktop filter form — submit via the
+        # desktop one (input.input-sm lives only inside the desktop form).
+        |> 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(
-          # There's a mobile and a desktop filter — just grab the desktop one.
-          element(lv, ~s(input.input-sm[phx-change="filter_callsign"])),
-          %{"callsign" => "   "}
+        lv
+        |> form(~s|form[phx-submit="filter_callsign"]:has(input.input-sm)|,
+          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