From a042c8a870323262803989df840f15c351393a24 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 8 Jan 2021 16:23:20 +0100
Subject: [PATCH 1/2] added outsideclick as custom directive

ref #27
---
 src/components/outsideclick.js | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/components/outsideclick.js

diff --git a/src/components/outsideclick.js b/src/components/outsideclick.js
new file mode 100644
index 00000000..f2eef649
--- /dev/null
+++ b/src/components/outsideclick.js
@@ -0,0 +1,10 @@
+/** Dispatch event on click outside of node */
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (event.target.getAttribute('data-id') === 'modal_backdrop') {
+			node.dispatchEvent(new CustomEvent('click_outside', node));
+		}
+	};
+	document.removeEventListener('click', handleClick, true);
+	document.addEventListener('click', handleClick, true);
+}

From 2657f30cf3acaa592408d2d4cddcb02bf76bb6af Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 8 Jan 2021 16:23:45 +0100
Subject: [PATCH 2/2] use outsideclick custom directive in AddTrackModal
 component

ref #27
---
 src/components/AddTrackModal.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index 6f94c10c..05a2b8f8 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -1,5 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../store.js";
   import { TrackService } from "@odit/lfk-client-js";
@@ -76,11 +77,19 @@
 </script>
 
 {#if modal_open}
-  <div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
     <div
       class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-        <div class="absolute inset-0 bg-gray-500 opacity-75" />
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
       </div>
       <span
         class="hidden sm:inline-block sm:align-middle sm:h-screen"