usePreventAutoFocus.tsx

import React from 'react';

/**
 * Hook that prevents auto-focus behavior while still maintaining focus management.
 * Useful for modal dialogs where you want to control the initial focus.
 *
 * @template E - Element type, defaults to HTMLDivElement
 * @returns Object containing:
 *  - ref: React ref to attach to the element
 *  - onOpenAutoFocus: Event handler to prevent default focus behavior
 *  - tabIndex: -1 to make element focusable
 */
export function usePreventAutoFocus<E extends HTMLElement = HTMLDivElement>() {
  const ref = React.useRef<E>(null);

  const onOpenAutoFocus = React.useCallback((event: Event) => {
    event.preventDefault();
    ref.current?.focus({ preventScroll: true });
  }, []);

  return { ref, onOpenAutoFocus, tabIndex: -1 as const };
}

/**
<DialogContent
        className="[&>button]:hidden w-[90vw] max-w-none h-[90vh] max-h-none p-0 focus:outline-none"
        {...preventAutoFocus}
      >
**/