Viewing File: /home/markqprx/iniasli.pro/client/ui/focus/use-auto-focus.ts
import {RefObject, useEffect, useRef} from 'react';
export interface AutoFocusProps {
autoFocus?: boolean;
autoSelectText?: boolean;
disabled?: boolean;
}
export function useAutoFocus(
{autoFocus, autoSelectText}: AutoFocusProps,
ref: RefObject<HTMLElement>
) {
const autoFocusRef = useRef(autoFocus);
useEffect(() => {
if (autoFocusRef.current && ref.current) {
// run inside animation frame to prevent issues when opening
// dialog with via keyboard shortcut and focusing input
requestAnimationFrame(() => {
ref.current?.focus();
if (autoSelectText && ref.current?.nodeName.toLowerCase() === 'input') {
(ref.current as HTMLInputElement).select();
}
});
}
autoFocusRef.current = false;
}, [ref, autoSelectText]);
}
Back to Directory
File Manager