FocusTrap.

Author: e3ndr

src/lib/helpers/FocusTrap.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+	interface Props {
+		class?: string;
+		style?: string;
+		onblur?: () => void;
+		onfocus?: () => void;
+		focused?: boolean;
+	}
+
+	function isDescendant(parent: HTMLElement, child?: Node) {
+		let node: Node | null | undefined = child;
+		while (node) {
+			if (node == parent) {
+				return true;
+			}
+			node = node.parentNode;
+		}
+
+		return false;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		//
+		class: clazz,
+		style,
+		onblur,
+		onfocus,
+		focused = $bindable(false)
+	}: Props = $props();
+
+	let div: HTMLElement;
+
+	function focusGained(e: FocusEvent) {
+		if (focused) return; // We already HAVE focus.
+
+		focused = true;
+		onfocus?.();
+	}
+
+	function focusLost(e: FocusEvent) {
+		if (!focused) return; // We've already LOST focus.
+
+		// @ts-ignore
+		const target = e.relatedTarget as Node;
+
+		// If the newly focused element is NOT one of ours.
+		if (!isDescendant(div, target)) {
+			focused = false;
+			onblur?.();
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	{style}
+	class={clazz}
+	bind:this={div}
+	onclick={focusGained}
+	onfocusin={focusGained}
+	onfocusout={focusLost}
+	tabindex="-1"
+>
+	<!-- svelte-ignore slot_element_deprecated -->
+	<slot />
+</div>

src/lib/index.ts

@@ -4,4 +4,5 @@ export { default as Divider } from '$lib/components/Divider.svelte';
 export { default as DynamicList } from '$lib/components/DynamicList.svelte';
 export { default as Input } from '$lib/components/Input.svelte';
 export { default as InvertedScroller } from '$lib/components/InvertedScroller.svelte';
+export { default as FocusTrap } from '$lib/helpers/FocusTrap.svelte';
 export { default as LongPressListener } from '$lib/helpers/LongPressListener.svelte';

src/routes/+page.svelte

@@ -4,6 +4,7 @@
 		Button,
 		Divider,
 		DynamicList,
+		FocusTrap,
 		Input,
 		InvertedScroller,
 		LongPressListener
@@ -26,6 +27,8 @@
 	let dynamicListBleed = 300;
 	let dynamicList1: DynamicList;
 	let dynamicList2: DynamicList;
+
+	let focusTrapHasFocus: boolean = false;
 </script>
 
 {#snippet itemRenderer(item: number | string)}
@@ -276,6 +279,18 @@ Is at bottom?
 	{/key}
 </div>
 
+<h2>FocusTrap</h2>
+
+Has focus?
+<b>{focusTrapHasFocus ? 'Yes' : 'No'}</b>
+
+<FocusTrap bind:focused={focusTrapHasFocus}>
+	<Box sides={['top', 'bottom', 'left', 'right']}>
+		<p>When you click in this box, it gains focus. When you click out, it loses focus.</p>
+		<!-- <Input type="text" bind:value={textInputValue} placeholder="Some focusable input" /> -->
+	</Box>
+</FocusTrap>
+
 <h2>LongPressListener (for mobile)</h2>
 
 <LongPressListener