Localstack Email Viewer

_reference/localEmailViewer/index.js

@@ -468,32 +468,6 @@ function clientApp(config) {
       renderList();
     });
 
-    el.list.addEventListener(
-      "toggle",
-      (event) => {
-        const details = event.target;
-
-        if (!(details instanceof HTMLDetailsElement) || !details.matches(".card")) {
-          return;
-        }
-
-        const id = details.dataset.id;
-
-        if (!id) {
-          return;
-        }
-
-        if (details.open) {
-          state.openIds.add(id);
-        } else {
-          state.openIds.delete(id);
-        }
-
-        hydrate(details, getMessage(id));
-      },
-      true
-    );
-
     el.list.addEventListener("click", async (event) => {
       const button = event.target.closest("button[data-action]");
 
@@ -749,9 +723,30 @@ function clientApp(config) {
 
     el.empty.hidden = true;
     el.list.innerHTML = state.filtered.map(renderCard).join("");
+    bindCardToggles();
     el.list.querySelectorAll(".card[open]").forEach((details) => hydrate(details, getMessage(details.dataset.id)));
   }
 
+  function bindCardToggles() {
+    el.list.querySelectorAll(".card").forEach((details) => {
+      details.addEventListener("toggle", () => {
+        const id = details.dataset.id;
+
+        if (!id) {
+          return;
+        }
+
+        if (details.open) {
+          state.openIds.add(id);
+        } else {
+          state.openIds.delete(id);
+        }
+
+        hydrate(details, getMessage(id));
+      });
+    });
+  }
+
   function renderCard(message) {
     const open = state.openIds.has(message.id);
     const view = state.views[message.id] || (message.hasHtml ? "rendered" : "text");