Detect outside clicks

outsideClick.ts

/**
 * Detect outside clicks
 * @param node - The node to detect outside clicks. The callback will be executed when outside of this node click is detected
 * @param callback - The callback to execute when an outside click is detected
 * @param excludes - The ids of the nodes to exclude from the outside click detection
 */
export function outsideClick(
    node: Node,
    {
        callback,
        excludes
    }: {
        callback: () => void;
        excludes: string[];
    }
) {
    const handleClick = (event: Event) => {
        // Identify whether the clicked node is an excluded node to detect outside clicks
        const excludingNodes = excludes.map((id) => document.getElementById(id));
        const isAnExcludedNode = excludingNodes.some(
            (elem: HTMLElement | null) => elem !== null && elem.contains(event.target as Node)
        );

        if (
            !node.contains(event.target as Node) && // Check if the clicked node is outside the element and its children
            !isAnExcludedNode // Check if the clicked node is not an excluded node
        ) {
            callback();
        }
    };

    // Listen for click events on the document
    document.addEventListener('click', handleClick, true);

    return {
        destroy() {
            // Remove the event listener when the element is destroyed
            document.removeEventListener('click', handleClick, true);
        }
    };
}