Как предотвратить закрытия модального окна, при клике на объект созданный через портал

Суть такая, у меня есть костюмный Select который при открытие создает блок через реакт портал, и вставляет его в конец документа, и есть модальное окно которое открывается на полный экран и при нажатие вне области модального окна, закрывается, проблема в том-что если я нажимаю на блок который был зарендарин через портал, то модальное окно считает что он относится к контенту внутри, что логично.

Закрываю модальное окно вот такой функцией:

const handleClickOutside = useCallback((event: MouseEvent) => {
    if (modalRef.current?.contains(event.target as Node)) return;
    /* setIsOpen(false); */
}, []);

useEffect(() => {
    if (!closeOnBlur) return;

    if (isOpen) {
        document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
        document.removeEventListener('mousedown', handleClickOutside);
    };
}, [isOpen, closeOnBlur]); // close on click outside

Все легко и логично у нас есть modalRef на блоке, и клик добавленный на window если при клике, модальное окно содержит это блок внутри, значит закрывать не нужно. А если не содержит значит клик был вне области, и мы закрываем.

В Select я делаю портал:

<>
    <button
       {/* Контент который показывает label выбранного option */}
    </button>

    <Portal>
        {/* Тут контент который показывает возможные выборы option */}
    </Portal>
</>

Сам имеет такой код:

import ReactDOM from 'react-dom';
import React from 'react';

interface PortalProps {
    children: React.ReactNode;
    place?: Element | DocumentFragment;
}

const Portal = ({ children, place = document.body }: PortalProps): JSX.Element => {
    if (typeof window == 'undefined') return;
    return ReactDOM.createPortal(children, place) as React.ReactPortal;
};

export default Portal;

Ничего не обычного просто рендарим блок где надо.

Смыл такой что наш Select внутри кнопка получается находится в разметки модального окна, поэтому она считается внутренним контентом, а вот создание опции через портал, как бы уже не являются счастью разметки, тем самым при проверки contains она не находит их в контенте модального окна, тем самым думает что нажатие было вне модального окна.

Есть способ как-то указать внутри Select ссылку на созданный портал? Или как-то при проверки понять что блок является порталом, найти родителя, и проверит входит ли он в контент модального окна?


Ответы (0 шт):