@dvcol/svelte-utils/dist/focusin.action.js

Svelte library for common utility functions and constants

import { debounce } from '@dvcol/common-utils/common/debounce';
import { getFocusableElement } from '@dvcol/common-utils/common/element';
export const focusin = (node, options) => {
    let params = options;
    const setState = (value, e) => {
        if (value === params.focusin)
            return;
        params.focusin = value;
        params.onChange?.(value, e);
    };
    const onFocus = (e) => {
        if (params.focusin)
            return;
        setState(true, e);
    };
    const onBlur = debounce((e) => {
        if (!params.focusin)
            return;
        if (node.contains(document.activeElement))
            return;
        setState(false, e);
    }, options.debounce ?? 0);
    node.addEventListener('focusin', onFocus, { passive: true });
    node.addEventListener('focusout', onBlur, { passive: true });
    return {
        update: (_options) => {
            params = _options;
            if (params.mirror === false)
                return;
            const isFocused = node.contains(document.activeElement);
            if (isFocused === params.focusin)
                return;
            if (params.focusin) {
                node.focus();
                if (node.contains(document.activeElement))
                    return;
                return getFocusableElement(node)?.focus();
            }
            if (!(document.activeElement instanceof HTMLElement))
                return;
            return document.activeElement.blur();
        },
        destroy: () => {
            node.removeEventListener('focusin', onFocus);
            node.removeEventListener('focusout', onBlur);
        },
    };
};