From aca6ee13c8e38482023646e2ea7147b51a8041a0 Mon Sep 17 00:00:00 2001
From: Nick Evans <nick.evans@northwestern.edu>
Date: Tue, 31 Oct 2023 18:54:10 -0500
Subject: [PATCH] Fix UFoC from dropdowns

---
 src/components/NavDropdown.astro |  2 +-
 src/scripts/initialize-dt.js     | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/NavDropdown.astro b/src/components/NavDropdown.astro
index 2464b48..4a08f9c 100644
--- a/src/components/NavDropdown.astro
+++ b/src/components/NavDropdown.astro
@@ -10,7 +10,7 @@ const { label } = Astro.props;
         <span>{label}</span>
         <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </button>
-    <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-10">
+    <div x-cloak x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-10">
         <div class="px-2 py-2 bg-white rounded-md shadow">
             <slot/>
         </div>
diff --git a/src/scripts/initialize-dt.js b/src/scripts/initialize-dt.js
index 3f3f69e..582ee0c 100644
--- a/src/scripts/initialize-dt.js
+++ b/src/scripts/initialize-dt.js
@@ -1,10 +1,12 @@
 import { DataTable, addColumnFilter } from "simple-datatables";
 
-const dt = new DataTable('#cards', {
-    paging: false,
-});
+document.addEventListener('DOMContentLoaded', function(event) {
+    const dt = new DataTable('#cards', {
+        paging: false,
+    });
 
-addColumnFilter(dt);
+    addColumnFilter(dt);
 
-document.querySelector('.datatable-search .datatable-input').setAttribute('aria-label', 'Search');
-document.querySelector('nav.datatable-pagination').setAttribute('aria-label', 'Card Page');
\ No newline at end of file
+    document.querySelector('.datatable-search .datatable-input').setAttribute('aria-label', 'Search');
+    document.querySelector('nav.datatable-pagination').setAttribute('aria-label', 'Card Page');
+});
\ No newline at end of file