From f34ceb78f17dbdc531e7be90b7039231cd919c46 Mon Sep 17 00:00:00 2001
From: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
Date: Fri, 7 Jun 2024 13:49:44 +0200
Subject: [PATCH] Implement a criminal hack to track removal of modal's child
 live components

---
 lib/plausible_web/live/components/modal.ex | 50 +++++++++++++++++++---
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/lib/plausible_web/live/components/modal.ex b/lib/plausible_web/live/components/modal.ex
index 127e88ced..683ff9649 100644
--- a/lib/plausible_web/live/components/modal.ex
+++ b/lib/plausible_web/live/components/modal.ex
@@ -104,13 +104,27 @@ defmodule PlausibleWeb.Live.Components.Modal do
   end
 
   @impl true
+  def update(%{live_cids: live_cids}, socket) do
+    socket =
+      if live_cids == [] do
+        assign(socket, load_content?: true)
+      else
+        track_live_cids(socket)
+        socket
+      end
+
+    {:ok, put_private(socket, :live_cids, live_cids)}
+  end
+
   def update(assigns, socket) do
     socket =
-      assign(socket,
+      socket
+      |> assign(
         id: assigns.id,
         inner_block: assigns.inner_block,
         load_content?: true
       )
+      |> put_private(:live_cids, [])
 
     {:ok, socket}
   end
@@ -127,14 +141,14 @@ defmodule PlausibleWeb.Live.Components.Modal do
 
     assigns =
       assign(assigns,
-        class: ["modal-dialog relative opacity-0 translate-y-4 sm:translate-y-0" | class],
+        class: ["modal-dialog relative opacity-0 translate-y-4 sm:translate-y-0 z-[51]" | class],
         dialog_id: assigns.id <> "-dialog"
       )
 
     ~H"""
     <div
       id={@id}
-      class="relative z-[49] [&[data-phx-ref]_div.modal-dialog]:hidden [&[data-phx-ref]_div.modal-loading]:block"
+      class="relative z-[49] [&[data-phx-ref]_div.modal-dialog]:hidden"
       data-modal
       x-cloak
       x-data="{
@@ -144,7 +158,6 @@ defmodule PlausibleWeb.Live.Components.Modal do
           document.body.style['overflow-y'] = 'hidden';
 
           if (this.firstLoadDone) {
-            liveSocket.execJS($el, $el.dataset.onclose);
             liveSocket.execJS($el, $el.dataset.onopen);
           } else {
             this.firstLoadDone = true;
@@ -154,6 +167,7 @@ defmodule PlausibleWeb.Live.Components.Modal do
         },
         closeModal() {
           this.modalOpen = false;
+          liveSocket.execJS($el, $el.dataset.onclose);
 
           setTimeout(function() {
             document.body.style['overflow-y'] = 'auto';
@@ -206,7 +220,7 @@ defmodule PlausibleWeb.Live.Components.Modal do
         >
           <%= render_slot(@inner_block) %>
         </Phoenix.Component.focus_wrap>
-        <div class="modal-loading hidden w-full self-center">
+        <div class="modal-loading absolute w-full self-center">
           <div class="text-center">
             <PlausibleWeb.Components.Generic.spinner class="inline-block h-8 w-8" />
           </div>
@@ -218,10 +232,34 @@ defmodule PlausibleWeb.Live.Components.Modal do
 
   @impl true
   def handle_event("open", _, socket) do
-    {:noreply, assign(socket, load_content?: true)}
+    track_live_cids(socket)
+
+    {:noreply, socket}
   end
 
   def handle_event("close", _, socket) do
+    socket = put_private(socket, :live_cids, socket.private.children_cids)
     {:noreply, assign(socket, load_content?: false)}
   end
+
+  defp track_live_cids(socket) do
+    if socket.private.live_cids != [] do
+      pid = self()
+
+      Task.start(fn ->
+        Process.sleep(60)
+
+        {cid_to_component, _, _} = :sys.get_state(pid).components
+        existing_cids = Map.keys(cid_to_component)
+
+        new_live_cids = Enum.filter(socket.private.live_cids, &(&1 in existing_cids))
+
+        send_update(pid, socket.assigns.myself, live_cids: new_live_cids)
+      end)
+    else
+      send_update(socket.assigns.myself, live_cids: [])
+    end
+
+    socket
+  end
 end