Open universal search modal instantly via client-side JS

Replace phx-click server event with Fluxon.open_dialog for zero-latency
modal opening. The modal DOM is now always present (no :if conditional) so
it can be shown instantly; the server syncs state in the background.

Fix test selectors that now match the always-present modal form by scoping
to forms without phx-target (which the modal form always has).
This commit is contained in:
Claudio Ortolina
2026-05-07 20:43:15 +01:00
parent fa7a01b489
commit 621b35d824
6 changed files with 12 additions and 11 deletions
@@ -25,7 +25,7 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.IndexTest do
assert has_element?(view, "p", "Bandcamp")
view
|> form("form", query: "Amazon")
|> form("form:not([phx-target])", query: "Amazon")
|> render_change()
assert_patch(view, ~p"/online-store-templates?page=1&page_size=50&query=Amazon")
@@ -40,7 +40,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.IndexTest do
test "renders search page with form", %{conn: conn} do
conn
|> visit(~p"/scrobble")
|> assert_has("form[phx-submit='search']")
|> assert_has("form[phx-submit='search']:not([phx-target])")
end
test "shows connect Last.fm button when not authenticated", %{conn: conn} do
@@ -67,7 +67,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.IndexTest do
session
|> unwrap(fn view ->
view
|> form("form[phx-submit='search']", %{query: "marbles"})
|> form("form[phx-submit='search']:not([phx-target])", %{query: "marbles"})
|> render_submit()
render(view)
@@ -82,7 +82,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.IndexTest do
session
|> unwrap(fn view ->
view
|> form("form[phx-submit='search']", %{query: ""})
|> form("form[phx-submit='search']:not([phx-target])", %{query: ""})
|> render_submit()
end)
|> refute_has("h3", "Release Groups")
@@ -108,7 +108,7 @@ defmodule MusicLibraryWeb.ScrobbleLive.IndexTest do
session
|> unwrap(fn view ->
view
|> form("form[phx-submit='search']", %{query: "nonexistent"})
|> form("form[phx-submit='search']:not([phx-target])", %{query: "nonexistent"})
|> render_submit()
render(view)
@@ -140,7 +140,7 @@ defmodule MusicLibraryWeb.ScrobbleRulesLiveTest do
{:ok, index_live, _html} = live(conn, ~p"/scrobble-rules")
index_live
|> form("form[phx-change='search']", query: scrobble_rule.match_value)
|> form("form[phx-change='search']:not([phx-target])", query: scrobble_rule.match_value)
|> render_change()
assert_patch(index_live)
@@ -56,7 +56,7 @@ defmodule MusicLibraryWeb.ScrobbledTracksLiveTest do
session
|> unwrap(fn view ->
view
|> form("form[phx-submit='search']", %{query: "Unique Track"})
|> form("form[phx-submit='search']:not([phx-target])", %{query: "Unique Track"})
|> render_submit()
end)
|> assert_has("p", "Unique Track Title")
@@ -23,7 +23,7 @@ defmodule MusicLibraryWeb.UniversalSearchLive.IndexTest do
test "modal is hidden by default", %{conn: conn} do
conn
|> visit(~p"/collection")
|> refute_has("#universal-search-root")
|> assert_has("#universal-search-root[hidden]")
end
test "modal opens when search button is clicked", %{conn: conn} do