useFocusTrap

1// Copyright (c) 2026 raouf.codes - Azemmur
2 
3'use client';
4 
5import { useEffect } from 'react';
6 
7const FOCUSABLE_SELECTORS = [
8  'a[href]',
9  'button:not([disabled])',
10  'textarea:not([disabled])',
11  'input:not([disabled])',
12  'select:not([disabled])',
13  '[tabindex]:not([tabindex="-1"])',
14].join(',');
15 
16/**
17 * Hook to trap focus within a container element.
18 *
19 * When active, Tab and Shift+Tab will cycle through focusable elements
20 * within the container, preventing focus from escaping.
21 *
22 * @example
23 * ```tsx
24 * const containerRef = useRef<HTMLDivElement>(null);
25 * useFocusTrap(isOpen, containerRef);
26 *
27 * return <div ref={containerRef}>...</div>;
28 * ```
29 *
30 * @param active - Whether the focus trap is active
31 * @param containerRef - Ref to the container element
32 */
33export function useFocusTrap(
34  active: boolean,
35  containerRef: React.RefObject<HTMLElement | null>,
36) {
37  useEffect(() => {
38    const container = containerRef.current;
39    if (!active || !container) return;
40 
41    const handleTabKey = (e: KeyboardEvent) => {
42      if (e.key !== 'Tab') return;
43 
44      const focusableElements =
45        container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS);
46 
47      if (focusableElements.length === 0) return;
48 
49      const firstElement = focusableElements[0];
50      const lastElement = focusableElements[focusableElements.length - 1];
51 
52      if (!firstElement || !lastElement) return;
53 
54      if (e.shiftKey) {
55        if (document.activeElement === firstElement) {
56          e.preventDefault();
57          lastElement.focus();
58        }
59      } else {
60        if (document.activeElement === lastElement) {
61          e.preventDefault();
62          firstElement.focus();
63        }
64      }
65    };
66 
67    const focusableElements =
68      container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS);
69    const firstElement = focusableElements[0];
70    if (firstElement) {
71      firstElement.focus();
72    }
73 
74    container.addEventListener('keydown', handleTabKey);
75 
76    return () => {
77      container.removeEventListener('keydown', handleTabKey);
78    };
79  }, [active, containerRef]);
80}