graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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.
This commit is contained in:
Graham McIntire 2026-05-03 09:54:44 -05:00
parent 0b0718e047
commit 01341d20f3
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59
2 changed files with 48 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
lib/microwaveprop_web/live/contact_map_live.ex
View file

@ -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">

28
test/microwaveprop_web/live/contact_map_live_test.exs
View file

@ -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