From be85f7cc35707bf76bac28990748d465923e0861 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 10 May 2025 22:09:05 +0400
Subject: [PATCH] fix: confirm dialog focus

---
 .../components/common/ConfirmDialog.svelte    | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/common/ConfirmDialog.svelte b/src/lib/components/common/ConfirmDialog.svelte
index c5f23175c..29efc59e4 100644
--- a/src/lib/components/common/ConfirmDialog.svelte
+++ b/src/lib/components/common/ConfirmDialog.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import DOMPurify from 'dompurify';
 
-	import { onMount, getContext, createEventDispatcher } from 'svelte';
+	import { onMount, getContext, createEventDispatcher, onDestroy } from 'svelte';
+	import * as FocusTrap from 'focus-trap';
+
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
@@ -26,6 +28,8 @@
 	let modalElement = null;
 	let mounted = false;
 
+	let focusTrap: FocusTrap.FocusTrap | null = null;
+
 	const handleKeyDown = (event: KeyboardEvent) => {
 		if (event.key === 'Escape') {
 			console.log('Escape');
@@ -51,16 +55,30 @@
 	$: if (mounted) {
 		if (show && modalElement) {
 			document.body.appendChild(modalElement);
+			focusTrap = FocusTrap.createFocusTrap(modalElement);
+			focusTrap.activate();
 
 			window.addEventListener('keydown', handleKeyDown);
 			document.body.style.overflow = 'hidden';
 		} else if (modalElement) {
+			focusTrap.deactivate();
+
 			window.removeEventListener('keydown', handleKeyDown);
 			document.body.removeChild(modalElement);
 
 			document.body.style.overflow = 'unset';
 		}
 	}
+
+	onDestroy(() => {
+		show = false;
+		if (focusTrap) {
+			focusTrap.deactivate();
+		}
+		if (modalElement) {
+			document.body.removeChild(modalElement);
+		}
+	});
 </script>
 
 {#if show}