Как предотвратить закрытия модального окна, при клике на объект созданный через портал
Суть такая, у меня есть костюмный 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 ссылку на созданный портал? Или как-то при проверки понять что блок является порталом, найти родителя, и проверит входит ли он в контент модального окна?