Ver Fonte

fix: modal esc

Timothy J. Baek há 10 meses atrás
pai
commit
bf4dcc10af
1 ficheiros alterados com 8 adições e 3 exclusões
  1. 8 3
      src/lib/components/common/Modal.svelte

+ 8 - 3
src/lib/components/common/Modal.svelte

@@ -23,12 +23,17 @@
 	};
 
 	const handleKeyDown = (event: KeyboardEvent) => {
-		if (event.key === 'Escape') {
+		if (event.key === 'Escape' && isTopModal()) {
 			console.log('Escape');
 			show = false;
 		}
 	};
 
+	const isTopModal = () => {
+		const modals = document.getElementsByClassName('modal');
+		return modals.length && modals[modals.length - 1] === modalElement;
+	};
+
 	onMount(() => {
 		mounted = true;
 	});
@@ -38,8 +43,8 @@
 		window.addEventListener('keydown', handleKeyDown);
 		document.body.style.overflow = 'hidden';
 	} else if (modalElement) {
-		document.body.removeChild(modalElement);
 		window.removeEventListener('keydown', handleKeyDown);
+		document.body.removeChild(modalElement);
 		document.body.style.overflow = 'unset';
 	}
 </script>
@@ -49,7 +54,7 @@
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		bind:this={modalElement}
-		class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
+		class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-[9999] overflow-hidden overscroll-contain"
 		in:fade={{ duration: 10 }}
 		on:mousedown={() => {
 			show = false;