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] 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"