Bugfix for download button dropdown outsideclick

ref #91

src/components/orgs/OrgDetail.svelte

@@ -57,8 +57,8 @@
   let delete_org = {};
   document.addEventListener("click", function (e) {
     if (
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
     ) {
       sponsoring_contracts_download_open = false;
     }

src/components/orgs/OrgOverview.svelte

@@ -20,8 +20,8 @@
 
   document.addEventListener("click", function (e) {
     if (
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
     ) {
       sponsoring_contracts_download_open = false;
     }

src/components/runners/RunnerDetail.svelte

@@ -35,8 +35,8 @@
   });
   document.addEventListener("click", function (e) {
     if (
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
     ) {
       sponsoring_contracts_download_open = false;
     }

src/components/runners/RunnersOverview.svelte

@@ -33,8 +33,8 @@
     .concat(mappedteams);
   document.addEventListener("click", function (e) {
     if (
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
     ) {
       sponsoring_contracts_download_open = false;
     }

src/components/teams/TeamDetail.svelte

@@ -46,8 +46,8 @@
   });
   document.addEventListener("click", function (e) {
     if (
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+      e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
     ) {
       sponsoring_contracts_download_open = false;
     }

src/components/teams/TeamsOverview.svelte

@@ -6,6 +6,7 @@
   import store, { users as usersstore } from "../../store.js";
   import TeamsEmptyState from "./TeamsEmptyState.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+  import { clickOutside } from "../base/outsideclick";
   $: searchvalue = "";
   $: active_deletes = [];
   $: sponsoring_contracts_download_open = false;
@@ -19,12 +20,13 @@
     usersstore.set(data);
   });
   document.addEventListener("click", function (e) {
-    if (
+      console.log(e.target.parentNode)
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      if (
-      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+        e.target.parentNode?.parentNode?.id != "sponsoring:dropdown" &&
-    ) {
+        e.target.parentNode?.parentNode?.id != "sponsoring:dropdown:menu"
-      sponsoring_contracts_download_open = false;
+      ) {
-    }
+        sponsoring_contracts_download_open = false;
+      }
   });
   async function generateSponsoringContract(locale) {
     sponsoring_contracts_download_open = false;
@@ -111,54 +113,67 @@
         class="gridjs-input gridjs-search-input mb-4" />
       <div class="h-12">
         {#if current_teams.some((r) => r.is_selected === true)}
-        <div id="sponsoring:dropdown" class="relative inline-block">
+          <div id="sponsoring:dropdown" class="relative inline-block">
-          <div>
+            <div>
-            <button
+              <button
-              on:click={() => {
+                on:click={() => {
-                sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
+                  sponsoring_contracts_download_open = !sponsoring_contracts_download_open;
-              }}
+                }}
-              type="button"
+                type="button"
-              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
+                class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm inline-flex"
-              id="options-menu"
+                id="options-menu"
-              aria-haspopup="true"
+                aria-haspopup="true"
-              aria-expanded="true">
+                aria-expanded="true">
-              {$_('generate-sponsoring-contracts')}
+                {$_('generate-sponsoring-contracts')}
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="-mr-1 ml-2 h-5 w-5"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"/></svg>
+                <svg
-            </button>
+                  xmlns="http://www.w3.org/2000/svg"
-          </div>
+                  width="24"
-          {#if sponsoring_contracts_download_open}
+                  height="24"
-            <div
+                  viewBox="0 0 24 24"
-              class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
+                  class="-mr-1 ml-2 h-5 w-5"><path
-              id="sponsoring:dropdown:menu">
+                    fill="none"
-              <div
+                    d="M0 0h24v24H0z" />
-                class="py-1"
+                  <path
-                role="menu"
+                    fill="currentColor"
-                aria-orientation="vertical"
+                    d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
-                aria-labelledby="options-menu">
+              </button>
-                <span
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('de');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('german')}
-                </button>
-                <button
-                  on:click={() => {
-                    generateSponsoringContract('en');
-                  }}
-                  type="submit"
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
-                  role="menuitem">
-                  {$_('english')}
-                </button>
-              </div>
             </div>
-          {/if}
+            {#if sponsoring_contracts_download_open}
-        </div>
+              <div
+                class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
+                id="sponsoring:dropdown:menu"
+                on:click_outside={() => {
+                  sponsoring_contracts_download_open = false;
+                }}>
+                <div
+                  class="py-1"
+                  role="menu"
+                  aria-orientation="vertical"
+                  aria-labelledby="options-menu">
+                  <span
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700">{$_('select-language')}</span>
+                  <button
+                    on:click={() => {
+                      generateSponsoringContract('de');
+                    }}
+                    type="submit"
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
+                    role="menuitem">
+                    {$_('german')}
+                  </button>
+                  <button
+                    on:click={() => {
+                      generateSponsoringContract('en');
+                    }}
+                    type="submit"
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 inline-flex"
+                    role="menuitem">
+                    {$_('english')}
+                  </button>
+                </div>
+              </div>
+            {/if}
+          </div>
         {/if}
       </div>
       <div