Фокус DOM элемент в приложении React в использованииEffect Проблема

Question

Я хочу сфокусировать некоторый элемент html при рендеринге компонента. Мне нужно это внимание, чтобы я мог закрыть компонент на внешний щелчок. Проблема в том, что когда я проверяю фактический фокус с помощью инструмента разработчика, он остается на «теле» после рендеринга компонента.

Итак, моя идея заключалась в том, чтобы явно сфокусировать элемент из этого компонента, который не работает ..

Это мой код

// initiale the useRef
const initialFocusRef = useRef(null);

// connecting the ref to the div element
<div className="edi-frame" ref={initialFocusRef}>

// in useEffect i try to focus the element 
initialFocusRef.current.focus();

Ps. Работает с полем ввода. Но сам компонент не получил поля ввода, и когда я вставляю его с type = "hidden", он больше не работает.

Можете ли вы, ребята, помочь мне решить эту проблему? Спасибо!

РЕДАКТИРОВАТЬ: я могу использовать только крючки / функциональные компоненты.

Answer 1

div - это не фокусируемый элемент, но вы можете сделать его фокусируемым, добавив атрибут tabindex:

<div className="edi-frame" tabindex="-1" ref={initialFocusRef}>

Если вы хотите закрыть свой компонент, щелкнув за его пределами, я предлагаю вамиспользовать react-onclickoutside:

function ModalComponent({ close }) {
    const ref = useRef(null)
    useOnClickOutside(ref, close)
    return (
        <div className="edi-frame" ref={ref}>Some content</div>
    );
}