From 24f67bea8068ec747f6766a809f2f6426fd2ef13 Mon Sep 17 00:00:00 2001
From: Moritz <moritz.m@local-it.org>
Date: Mon, 8 Jun 2026 12:43:40 +0200
Subject: [PATCH] feat(member): keep text selection in the overview table from
 opening the member

---
 assets/js/app.js                            | 23 +++++++++++++++++++++
 lib/mv_web/live/member_live/index.html.heex |  2 ++
 test/mv_web/member_live/index_test.exs      | 11 ++++++++++
 3 files changed, 36 insertions(+)

diff --git a/assets/js/app.js b/assets/js/app.js
index 4c7e3c5..a003e27 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -103,6 +103,29 @@ Hooks.TableRowKeydown = {
   }
 }
 
+// RowSelectionGuard: distinguish drag-to-select-text from a plain click on the members table.
+// LiveView fires the row navigation push (select_row_and_navigate) on any click. When the user
+// drags across a cell to select text (e.g. an email to copy) and releases, the mouseup produces a
+// non-empty text selection; in that case we swallow the click in the capture phase so navigation is
+// suppressed. A plain click leaves the selection collapsed and navigates as before.
+Hooks.RowSelectionGuard = {
+  mounted() {
+    this.handleClickCapture = (e) => {
+      const selection = window.getSelection()
+      if (selection && !selection.isCollapsed && selection.toString().trim() !== "") {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+    // Capture phase so this runs before LiveView's bubbling phx-click handler.
+    this.el.addEventListener("click", this.handleClickCapture, true)
+  },
+
+  destroyed() {
+    this.el.removeEventListener("click", this.handleClickCapture, true)
+  }
+}
+
 // FocusRestore hook: WCAG 2.4.3 — when a modal closes, focus returns to the trigger element (e.g. "Delete member" button)
 Hooks.FocusRestore = {
   mounted() {
diff --git a/lib/mv_web/live/member_live/index.html.heex b/lib/mv_web/live/member_live/index.html.heex
index cd2ef32..eb7085d 100644
--- a/lib/mv_web/live/member_live/index.html.heex
+++ b/lib/mv_web/live/member_live/index.html.heex
@@ -82,6 +82,8 @@
 
   <%!-- On desktop (lg:), only the table area scrolls; header and filters stay visible. On mobile, normal flow. --%>
   <div
+    id="members-table-guard"
+    phx-hook="RowSelectionGuard"
     class="lg:max-h-[calc(100vh-14rem)] lg:overflow-auto min-h-0"
     data-testid="members-table-scroll"
     role="region"
diff --git a/test/mv_web/member_live/index_test.exs b/test/mv_web/member_live/index_test.exs
index c37c0fd..0cde8fd 100644
--- a/test/mv_web/member_live/index_test.exs
+++ b/test/mv_web/member_live/index_test.exs
@@ -111,6 +111,17 @@ defmodule MvWeb.MemberLive.IndexTest do
     end
   end
 
+  describe "drag-select vs click guard (§3.3)" do
+    @describetag :ui
+
+    test "members table carries the row-selection guard hook", %{conn: conn} do
+      conn = conn_with_oidc_user(conn)
+      {:ok, view, _html} = live(conn, ~p"/members")
+
+      assert has_element?(view, "[phx-hook=RowSelectionGuard][id=members-table-guard]")
+    end
+  end
+
   describe "translations" do
     @describetag :ui