From 19c57ffce0cb76eceea6464663b28a879cdf7d26 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sun, 16 Jun 2024 13:09:13 +0200
Subject: [PATCH] UX: remove trapFocus as it causes bugs

---
 package.json                  | 3 +--
 src/UI/Base/FloatOver.svelte  | 3 ---
 src/UI/Base/ModalRight.svelte | 2 --
 src/UI/ThemeViewGUI.svelte    | 2 +-
 4 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 9ef566671..1f3111980 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mapcomplete",
-  "version": "0.43.1",
+  "version": "0.43.2",
   "repository": "https://github.com/pietervdvn/MapComplete",
   "description": "A small website to edit OSM easily",
   "bugs": "https://github.com/pietervdvn/MapComplete/issues",
@@ -194,7 +194,6 @@
     "svg-path-parser": "^1.1.0",
     "tailwind-merge": "^1.13.1",
     "tailwindcss": "^3.1.8",
-    "trap-focus-svelte": "^1.0.2",
     "turndown": "^7.1.3",
     "vite-node": "^0.28.3",
     "vitest": "^0.28.3",
diff --git a/src/UI/Base/FloatOver.svelte b/src/UI/Base/FloatOver.svelte
index b4b4fa25a..edb18fd90 100644
--- a/src/UI/Base/FloatOver.svelte
+++ b/src/UI/Base/FloatOver.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte"
   import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import { twMerge } from "tailwind-merge"
-  import { trapFocus } from "trap-focus-svelte"
   import { ariaLabel } from "../../Utils/ariaLabel"
   import Translations from "../i18n/Translations"
 
@@ -25,7 +23,6 @@
 <div
   class={"absolute bottom-0 right-0 h-full w-screen p-4 md:p-6"}
   style="z-index: 21"
-  use:trapFocus
 >
   <div class="content normal-background h-full" on:click|stopPropagation={() => {}}>
     <div class="h-full rounded-xl">
diff --git a/src/UI/Base/ModalRight.svelte b/src/UI/Base/ModalRight.svelte
index b0d9a6930..dea9fc306 100644
--- a/src/UI/Base/ModalRight.svelte
+++ b/src/UI/Base/ModalRight.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte"
   import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import { trapFocus } from "trap-focus-svelte"
 
   /**
    * The slotted element will be shown on the right side
@@ -17,7 +16,6 @@
   style="max-width: 100vw; max-height: 100vh"
   tabindex="-1"
   id="modal-right"
-  use:trapFocus
 >
   <slot name="close-button">
     <button
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index 41d4a5984..69f92f7ee 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -452,7 +452,7 @@
 {/if}
 
 <If condition={state.previewedImage.map((i) => i !== undefined)}>
-  <FloatOver extraClasses="p-1" on:close={() => state.previewedImage.setData(undefined)}>
+  <FloatOver on:close={() => state.previewedImage.setData(undefined)}>
     <button
       class="absolute right-4 top-4 h-8 w-8 rounded-full p-0"
       on:click={() => previewedImage.setData(undefined)}