diff --git a/lib/mv_web/components/core_components.ex b/lib/mv_web/components/core_components.ex
index d19b1eb..be64655 100644
--- a/lib/mv_web/components/core_components.ex
+++ b/lib/mv_web/components/core_components.ex
@@ -474,7 +474,6 @@ defmodule MvWeb.CoreComponents do
slot :col, required: true do
attr :label, :string
- attr :col_click, :any, doc: "optional column-specific click handler that overrides row_click"
end
slot :action, doc: "the slot for showing user actions in the last table column"
@@ -510,11 +509,8 @@ defmodule MvWeb.CoreComponents do
|
{render_slot(col, @row_item.(row))}
|
diff --git a/lib/mv_web/live/member_live/index.ex b/lib/mv_web/live/member_live/index.ex
index f9d8aa1..ad4a4a9 100644
--- a/lib/mv_web/live/member_live/index.ex
+++ b/lib/mv_web/live/member_live/index.ex
@@ -1082,16 +1082,6 @@ defmodule MvWeb.MemberLive.Index do
|> Enum.map(&format_member_email/1)
end
- @doc """
- Returns a JS command to toggle member selection when clicking the checkbox column.
-
- Used as `col_click` handler to ensure clicking anywhere in the checkbox column
- toggles the checkbox instead of navigating to the member details.
- """
- def checkbox_column_click(member) do
- JS.push("select_member", value: %{id: member.id})
- end
-
# Formats a member's email in the format "First Last "
# Used for copy_emails feature and mailto links to create email-client-friendly format.
def format_member_email(member) do
diff --git a/lib/mv_web/live/member_live/index.html.heex b/lib/mv_web/live/member_live/index.html.heex
index fbeb416..1658209 100644
--- a/lib/mv_web/live/member_live/index.html.heex
+++ b/lib/mv_web/live/member_live/index.html.heex
@@ -65,7 +65,6 @@
<:col
:let={member}
- col_click={&MvWeb.MemberLive.Index.checkbox_column_click/1}
label={
~H"""
<.input
@@ -82,7 +81,11 @@
<.input
type="checkbox"
name={member.id}
+ phx-click="select_member"
+ phx-value-id={member.id}
checked={MapSet.member?(@selected_members, member.id)}
+ phx-capture-click
+ phx-stop-propagation
aria-label={gettext("Select member")}
role="checkbox"
/>
diff --git a/test/mv_web/member_live/index_test.exs b/test/mv_web/member_live/index_test.exs
index 9e3323f..0bcc731 100644
--- a/test/mv_web/member_live/index_test.exs
+++ b/test/mv_web/member_live/index_test.exs
@@ -285,9 +285,14 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members")
- # Select two members by sending the select_member event directly
- render_click(view, "select_member", %{"id" => member1.id})
- render_click(view, "select_member", %{"id" => member2.id})
+ # Select two members
+ view
+ |> element("[phx-click='select_member'][phx-value-id='#{member1.id}']")
+ |> render_click()
+
+ view
+ |> element("[phx-click='select_member'][phx-value-id='#{member2.id}']")
+ |> render_click()
# Trigger copy_emails event
view |> element("#copy-emails-btn") |> render_click()
@@ -331,8 +336,10 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members")
- # Select member with umlauts by sending the select_member event directly
- render_click(view, "select_member", %{"id" => member3.id})
+ # Select member with umlauts
+ view
+ |> element("[phx-click='select_member'][phx-value-id='#{member3.id}']")
+ |> render_click()
# Trigger copy_emails event - should not crash
view |> element("#copy-emails-btn") |> render_click()
@@ -348,8 +355,10 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members")
- # Select a member by sending the select_member event directly
- render_click(view, "select_member", %{"id" => member1.id})
+ # Select a member
+ view
+ |> element("[phx-click='select_member'][phx-value-id='#{member1.id}']")
+ |> render_click()
# Delete the member from the database
Ash.destroy!(member1)
@@ -370,9 +379,14 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members")
- # Select two members by sending the select_member event directly
- render_click(view, "select_member", %{"id" => member1.id})
- render_click(view, "select_member", %{"id" => member2.id})
+ # Select two members
+ view
+ |> element("[phx-click='select_member'][phx-value-id='#{member1.id}']")
+ |> render_click()
+
+ view
+ |> element("[phx-click='select_member'][phx-value-id='#{member2.id}']")
+ |> render_click()
# Get the socket state to verify the formatted email string
state = :sys.get_state(view.pid)
@@ -401,8 +415,10 @@ defmodule MvWeb.MemberLive.IndexTest do
{:ok, view, _html} = live(conn, "/members")
- # Select the test member by sending the select_member event directly
- render_click(view, "select_member", %{"id" => test_member.id})
+ # Select the test member
+ view
+ |> element("[phx-click='select_member'][phx-value-id='#{test_member.id}']")
+ |> render_click()
# The format should be "Test Format "
# We verify this by checking the flash shows 1 email was copied
@@ -425,8 +441,10 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members")
- # Select a member by sending the select_member event directly
- render_click(view, "select_member", %{"id" => member1.id})
+ # Select a member
+ view
+ |> element("[phx-click='select_member'][phx-value-id='#{member1.id}']")
+ |> render_click()
# Button should now be visible
assert has_element?(view, "#copy-emails-btn")
@@ -439,8 +457,10 @@ defmodule MvWeb.MemberLive.IndexTest do
conn = conn_with_oidc_user(conn)
{:ok, view, _html} = live(conn, "/members")
- # Select a member by sending the select_member event directly
- render_click(view, "select_member", %{"id" => member1.id})
+ # Select a member
+ view
+ |> element("[phx-click='select_member'][phx-value-id='#{member1.id}']")
+ |> render_click()
# Click copy button
view |> element("#copy-emails-btn") |> render_click()