feat: automation

src/lib/components/common/Dropdown.svelte

@@ -175,7 +175,8 @@
 		bind:this={contentEl}
 		class={contentClass}
 		transition:flyAndScale
-		on:click|stopPropagation
+		on:click={(e) => e.stopPropagation()}
+		on:pointerdown={(e) => e.stopPropagation()}
 	>
 		<slot name="content" />
 	</div>

src/lib/components/common/Modal.svelte

@@ -55,6 +55,9 @@
 		mounted = true;
 	});
 
+	let handleOutsidePointerDown;
+	let handleModalFocusIn;
+
 	$: if (show && modalElement) {
 		document.body.appendChild(modalElement);
 		focusTrap = FocusTrap.createFocusTrap(modalElement, {
@@ -66,10 +69,34 @@
 			}
 		});
 		focusTrap.activate();
+
+		// Auto-pause focus trap when interacting with portaled content (e.g. Dropdown)
+		handleOutsidePointerDown = (e) => {
+			if (focusTrap && modalElement && !modalElement.contains(e.target)) {
+				focusTrap.pause();
+			}
+		};
+		handleModalFocusIn = () => {
+			if (focusTrap) {
+				focusTrap.unpause();
+			}
+		};
+		document.addEventListener('pointerdown', handleOutsidePointerDown, true);
+		modalElement.addEventListener('focusin', handleModalFocusIn);
+
 		window.addEventListener('keydown', handleKeyDown);
 		document.body.style.overflow = 'hidden';
 	} else if (modalElement) {
-		focusTrap.deactivate();
+		if (focusTrap) {
+			focusTrap.deactivate();
+			focusTrap = null;
+		}
+		if (handleOutsidePointerDown) {
+			document.removeEventListener('pointerdown', handleOutsidePointerDown, true);
+		}
+		if (handleModalFocusIn) {
+			modalElement.removeEventListener('focusin', handleModalFocusIn);
+		}
 		window.removeEventListener('keydown', handleKeyDown);
 		document.body.removeChild(modalElement);
 		document.body.style.overflow = 'unset';