@solid-primitives/autofocus/dist/index.js

Primitives for autofocusing HTML elements

import { createEffect, onMount } from "solid-js";
import {} from "@solid-primitives/utils";
/**
 * Directive to autofocus the element on render. Uses the native `autofocus` attribute to decided whether to focus.
 *
 * @param element - Element to focus.
 * @param autofocus - Should this directive be enabled. defaults to false.
 *
 * @example
 * ```ts
 * <button autofocus use:autofocus>Autofocused</button>;
 *
 * // or with ref
 * <button autofocus ref={autofocus}>Autofocused</button>;
 * ```
 */
export const autofocus = (element, autofocus) => {
    if (autofocus?.() === false) {
        return;
    }
    onMount(() => {
        // Using a timeout makes it consistent
        if (element.hasAttribute("autofocus"))
            setTimeout(() => element.focus());
    });
};
/**
 * Creates a new reactive primitive for autofocusing the element on render.
 *
 * @param ref - Element to focus.
 * @param autofocus - Whether the element should be autofocused. defaults to true.
 *
 * @example
 * ```ts
 * let ref!: HTMLButtonElement;
 *
 * createAutofocus(() => ref); // Or using a signal accessor.
 *
 * <button ref={ref}>Autofocused</button>;
 * ```
 */
export const createAutofocus = (ref) => {
    createEffect(() => {
        const el = ref();
        el && setTimeout(() => el.focus());
    });
};