Add input and focus attachments (autoFocus, selectOnFocus, debounceEvent, ...)

Author: techniq

packages/svelte-attachments/src/lib/dataBackground.svelte.ts

@@ -1,11 +1,9 @@
 import { untrack } from 'svelte';
+import { Attachment } from 'svelte/attachments';
 import { Tween } from 'svelte/motion';
 import { EasingFunction } from 'svelte/transition';
 import { scaleLinear } from 'd3-scale';
 
-// Define Attachment type locally until Svelte 5.29+ is available
-export type Attachment<T extends EventTarget = Element> = (element: T) => void | (() => void);
-
 export type DataBackgroundOptions = {
   value: number | null | undefined;
   domain?: [number, number];

packages/svelte-attachments/src/lib/focus.ts

@@ -0,0 +1,48 @@
+import { Attachment } from 'svelte/attachments';
+import { delay } from '@layerstack/utils';
+
+export function focusMove(
+  options: { restoreFocus?: boolean; delay?: number; disabled?: boolean } = {
+    restoreFocus: false,
+    delay: 0,
+    disabled: false,
+  }
+): Attachment<HTMLElement | SVGElement> {
+  return (node: HTMLElement | SVGElement) => {
+    let previousActiveElement: Element | null = null;
+
+    if (!options.disabled) {
+      previousActiveElement = document.activeElement;
+
+      // Set `tabIndex` to `-1` which makes any element (ex. div) focusable programmaitcally (and mouse), but not via keyboard navigation - https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+      node.tabIndex = -1;
+
+      // Appear to need to wait for tabIndex to update before applying focus
+      delay(options.delay ?? 0).then(() => {
+        node.focus();
+      });
+    }
+
+    return () => {
+      // Restore previous active element
+      if (
+        !options.disabled &&
+        options.restoreFocus &&
+        previousActiveElement instanceof HTMLElement
+      ) {
+        previousActiveElement.focus();
+      }
+    };
+  };
+}
+
+// TODO: Add `focusTrap`
+// https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/
+// export function focusTrap(): Attachment<HTMLElement> {
+//   return (node: HTMLElement) => {
+//     // TODO: Implementation
+//     return () => {
+//       // cleanup
+//     };
+//   };
+// }

packages/svelte-attachments/src/lib/index.ts

@@ -1,5 +1,6 @@
 export * from './dataBackground.svelte.js';
-// export * from './input.js';
+export * from './focus.js';
+export * from './input.js';
 // export * from './layout.js';
 // export * from './mouse.js';
 // export * from './multi.js';

packages/svelte-attachments/src/lib/input.ts

@@ -0,0 +1,109 @@
+import { Attachment } from 'svelte/attachments';
+import { focusMove } from './focus.js';
+
+/**
+ * Auto focus node when rendered.  Useful for inputs
+ */
+export function autoFocus(
+  options?: Parameters<typeof focusMove>['0']
+): Attachment<HTMLElement | SVGElement> {
+  // Delay by 5ms by default since Dialog/Drawer/Menu also call `focusMove` but with default `0ms` delay, and we want to focus last
+  // Chrome works with `1ms`, but Firefox required `2ms` and Safari required `3ms`, so using `5ms` as a buffer
+  return focusMove({ delay: 5, ...options });
+}
+
+/**
+ * Selects the text inside a text node when the node is focused
+ */
+export function selectOnFocus(): Attachment<HTMLInputElement | HTMLTextAreaElement> {
+  return (node: HTMLInputElement | HTMLTextAreaElement) => {
+    const handleFocus = (event: Event) => {
+      node.select();
+    };
+
+    node.addEventListener('focus', handleFocus);
+
+    return () => {
+      node.removeEventListener('focus', handleFocus);
+    };
+  };
+}
+
+/**
+ * Blurs the node when Escape is pressed
+ */
+export function blurOnEscape(): Attachment<HTMLInputElement | HTMLTextAreaElement> {
+  return (node: HTMLInputElement | HTMLTextAreaElement) => {
+    const handleKey = (event: Event) => {
+      if (event instanceof KeyboardEvent && event.key === 'Escape') {
+        node.blur();
+      }
+    };
+
+    node.addEventListener('keydown', handleKey);
+
+    return () => {
+      node.removeEventListener('keydown', handleKey);
+    };
+  };
+}
+
+/**
+ * Automatically resize textarea based on content
+ * See:
+ *  - https://svelte.dev/repl/ead0f1fcd2d4402bbbd64eca1d665341?version=3.14.1
+ *  - https://svelte.dev/repl/f1a7e24a08a54947bb4447f295c741fb?version=3.14.1
+ */
+export function autoHeight(): Attachment<HTMLTextAreaElement> {
+  return (node: HTMLTextAreaElement) => {
+    function resize({ target }: { target: EventTarget | null }) {
+      if (target instanceof HTMLElement) {
+        target.style.height = '1px';
+        target.style.height = +target.scrollHeight + 'px';
+      }
+    }
+
+    node.style.overflow = 'hidden';
+    node.addEventListener('input', resize);
+
+    // Resize initially
+    resize({ target: node });
+
+    return () => {
+      node.removeEventListener('input', resize);
+    };
+  };
+}
+
+/**
+ * Debounce event handler (change, input, etc)
+ */
+export function debounceEvent(
+  options?: { type: string; listener: (e: Event) => any; timeout?: number } | null
+): Attachment<HTMLInputElement | HTMLTextAreaElement> {
+  return (node: HTMLInputElement | HTMLTextAreaElement) => {
+    let lastTimeoutId: ReturnType<typeof setTimeout>;
+
+    if (options) {
+      const { type, listener, timeout } = options;
+
+      function onEvent(e: Event) {
+        clearTimeout(lastTimeoutId);
+        lastTimeoutId = setTimeout(() => {
+          listener(e);
+        }, timeout ?? 300);
+      }
+
+      node.addEventListener(type, onEvent);
+
+      return () => {
+        node.removeEventListener(type, onEvent);
+        clearTimeout(lastTimeoutId);
+      };
+    }
+
+    return () => {
+      clearTimeout(lastTimeoutId);
+    };
+  };
+}

sites/docs/src/routes/_NavMenu.svelte

@@ -21,7 +21,7 @@
 
   const attachments = [
     'dataBackground',
-    // 'input',
+    'input',
     // 'layout',
     // 'mouse',
     // 'multi',

sites/docs/src/routes/docs/svelte-attachments/dataBackground/+page.svelte

@@ -45,7 +45,7 @@
 <h1>Usage</h1>
 
 <Code
-  source={`import { dataBackground } from '@layerstack/svelte-actions';`}
+  source={`import { dataBackground } from '@layerstack/svelte-attachments';`}
   language="javascript"
   class="mb-4"
 />

sites/docs/src/routes/docs/svelte-attachments/input/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import {
+    autoFocus,
+    autoHeight,
+    blurOnEscape,
+    selectOnFocus,
+    debounceEvent,
+  } from '@layerstack/svelte-attachments';
+
+  import Preview from '$docs/Preview.svelte';
+  import Code from '$docs/Code.svelte';
+</script>
+
+<h1>Usage</h1>
+
+<Code
+  source={`import { autoFocus, autoHeight, blurOnEscape, selectOnFocus, debounceEvent } from '@layerstack/svelte-attachments';`}
+  language="javascript"
+/>
+
+<h2>autoFocus <small>Auto focus node when rendered</small></h2>
+
+<Preview>
+  <input value="Example text" {@attach autoFocus()} class="border" />
+</Preview>
+
+<h2>selectOnFocus <small>Selects the text inside a text node when the node is focused</small></h2>
+
+<Preview>
+  <input value="Example text" {@attach selectOnFocus()} class="border" />
+</Preview>
+
+<h2>blurOnEscape <small>Blurs the node when Escape is pressed</small></h2>
+
+<Preview>
+  <input value="Example text" {@attach blurOnEscape()} class="border" />
+</Preview>
+
+<h2>autoHeight <small>Automatically resize textarea based on content</small></h2>
+
+<Preview>
+  <textarea value="Example text" {@attach autoHeight()} class="border"></textarea>
+</Preview>
+
+<h2>debounceEvent <small>Debounce any event (input, change, etc)</small></h2>
+
+<Preview>
+  <input
+    value="Example text"
+    {@attach debounceEvent({
+      type: 'input',
+      listener: (e) => {
+        // @ts-expect-error
+        console.log(e.target.value);
+      },
+      timeout: 1000,
+    })}
+    class="border"
+  />
+</Preview>

sites/docs/src/routes/docs/svelte-attachments/input/+page.ts

@@ -0,0 +1,12 @@
+import source from '$svelte-attachments/input.ts?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    meta: {
+      source,
+      pageSource,
+      related: ['components/TextField', 'components/Input'],
+    },
+  };
+}