From 0e7640bf86b6710d01cd6c553f205cad934f58bb Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 22:07:38 +0100
Subject: [PATCH] AddTrackModal - trap focus if active

ref #11
---
 package.json                        | 1 +
 src/components/AddTrackModal.svelte | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bca8a1d3..29026e93 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
 		"gridjs": "^3.2.1",
 		"localforage": "^1.9.0",
 		"svelte-filepond": "^0.0.1",
+		"svelte-focus-trap": "^1.0.1",
 		"svelte-i18n": "^3.3.0",
 		"tailwindcss": "^2.0.2",
 		"tinro": "^0.5.3",
diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index 6861905f..e374c4e7 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -1,5 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
+  import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../store.js";
   import { TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
@@ -57,7 +58,7 @@
 </script>
 
 {#if modal_open}
-  <div class="fixed z-10 inset-0 overflow-y-auto">
+  <div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
     <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">