Implemented rough outside click handler for the dropdown

ref #84

src/components/orgs/OrgDetail.svelte

@@ -55,6 +55,14 @@
   });
   let modal_open = false;
   let delete_org = {};
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
   function deleteOrganization() {
     RunnerOrganizationService.runnerOrganizationControllerRemove(
       original_object.id,
@@ -185,7 +193,8 @@
           </div>
           {#if sponsoring_contracts_download_open}
             <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">
+              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">
               <div
                 class="py-1"
                 role="menu"

src/components/orgs/OrgOverview.svelte

@@ -18,6 +18,15 @@
     }
   );
 
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
+
   async function generateSponsoringContract(locale) {
     sponsoring_contracts_download_open = false;
     const orgs = current_organizations.filter((r) => r.is_selected === true);
@@ -120,7 +129,8 @@
           </div>
           {#if sponsoring_contracts_download_open}
             <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">
+              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">
               <div
                 class="py-1"
                 role="menu"

src/components/runners/RunnerDetail.svelte

@@ -33,6 +33,14 @@
     original_data.group = original_data.group.id;
     editable = Object.assign(editable, original_data);
   });
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
   let orgs = [];
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
     orgs = val;
@@ -203,7 +211,8 @@
             </div>
             {#if sponsoring_contracts_download_open}
               <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">
+                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">
                 <div
                   class="py-1"
                   role="menu"

src/components/runners/RunnersOverview.svelte

@@ -31,6 +31,14 @@
       return { value: g.id, label: g.name };
     })
     .concat(mappedteams);
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
   RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
     teams = val;
   });
@@ -141,12 +149,23 @@
                 aria-haspopup="true"
                 aria-expanded="true">
                 {$_('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
+                  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>
               </button>
             </div>
             {#if sponsoring_contracts_download_open}
               <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">
+                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">
                 <div
                   class="py-1"
                   role="menu"

src/components/teams/TeamDetail.svelte

@@ -44,6 +44,14 @@
   GroupContactService.groupContactControllerGetAll().then((val) => {
     contacts = val;
   });
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
   function deleteTeam() {
     RunnerTeamService.runnerTeamControllerRemove(original.id, false)
       .then((resp) => {
@@ -167,7 +175,8 @@
           </div>
           {#if sponsoring_contracts_download_open}
             <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">
+              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">
               <div
                 class="py-1"
                 role="menu"

src/components/teams/TeamsOverview.svelte

@@ -18,6 +18,14 @@
   teams_promise.then((data) => {
     usersstore.set(data);
   });
+  document.addEventListener("click", function (e) {
+    if (
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown" &&
+      e.target.parentNode.parentNode.id != "sponsoring:dropdown:menu"
+    ) {
+      sponsoring_contracts_download_open = false;
+    }
+  });
   async function generateSponsoringContract(locale) {
     sponsoring_contracts_download_open = false;
     const teams = current_teams.filter((r) => r.is_selected === true);
@@ -120,7 +128,8 @@
           </div>
           {#if sponsoring_contracts_download_open}
             <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">
+              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">
               <div
                 class="py-1"
                 role="menu"