Disable accidental clicks on record list items

lib/music_library_web/live/record_live/index.ex

@@ -141,4 +141,14 @@ defmodule MusicLibraryWeb.RecordLive.Index do
   defp musicbrainz_url(record) do
     "https://musicbrainz.org/release-group/#{record.musicbrainz_id}"
   end
+
+  defp toggle_actions_menu(record_id) do
+    JS.toggle(to: "#actions-#{record_id}")
+    |> JS.toggle_class("pointer-events-none", to: "#records > li")
+  end
+
+  def close_actions_menu(record_id) do
+    JS.hide(to: "#actions-#{record_id}")
+    |> JS.remove_class("pointer-events-none", to: "#records > li")
+  end
 end

lib/music_library_web/live/record_live/index.html.heex

@@ -28,7 +28,7 @@
   </p>
 </div>
 
-<ul class="divide-y divide-gray-100" role="list" id="record-collection" phx-update="stream">
+<ul class="divide-y divide-gray-100" role="list" id="records" phx-update="stream">
   <li
     :for={{id, record} <- @streams.records}
     phx-click={JS.navigate(~p"/records/#{record}")}
@@ -77,8 +77,8 @@
           class="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900"
           aria-expanded="false"
           aria-haspopup="true"
-          phx-click={JS.toggle(to: "#actions-#{record.id}")}
+          phx-click={toggle_actions_menu(record.id)}
-          phx-click-away={JS.hide(to: "#actions-#{record.id}")}
+          phx-click-away={close_actions_menu(record.id)}
         >
           <span class="sr-only">Open options</span>
           <svg
@@ -101,10 +101,10 @@
             From: "transform opacity-100 scale-100"
             To: "transform opacity-0 scale-95"
         -->
-        <div
+        <.focus_wrap
           id={"actions-#{record.id}"}
           class={[
-            "hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
+            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
           ]}
           role="menu"
           aria-orientation="vertical"
@@ -151,7 +151,7 @@
           >
             Delete
           </.link>
-        </div>
+        </.focus_wrap>
       </div>
     </div>
   </li>