How to use Modal with content which is inside a portal?

[jussirantala]

Hey,

I'm trying to use ModalOverlay and Modal from react-aria-components and I need Combobox from headlessui/react to be inside the modal.

The issue is that when the Combobox is opened, the modal size grows because the list is inside modal. To fix that, I used a portal for Combobox and it has higher z-index than the modal. Also this portal is later in the DOM tree and it's a sibling, not a children. Now it looks correct and the list "overflows" the modal;

But now what happens is that if I click anywhere in the list it closes the modal. Even if I click in an area which is inside the modal. Also even if I add stopPropagation to click events in the list. It doesn't happen with isDismissable={true} but I want the modal to close if you click outside the modal.

How does the ModalOverlay detect the "outside" click? It seems it's not just adding a click event to hidden div which covers the screen. Instead it seems it's adding a click event to document.body, am I right? Does it then check if the target of the click event is a children of Modal or what? I don't understand why the modal closes in this case.

[snowystinger]

I think this is a duplicate of this issue? Dialog's focus management and work with 3rd party dialogs

[jussirantala]

I think this is a duplicate of this issue? Dialog's focus management and work with 3rd party dialogs

Not sure... I can have focus on the list because of the higher z-index. The issue is that if I click anywhere in the list, it closes the modal. It happens when I release the left mouse button. I can use scrollbar for example but when I release the mouse button, modal closes.

[snowystinger]

Thanks for having a look. I think the answer is the same ultimately. Our current FocusScopes and interaction outside doesn't see the third party popover/dialog as a child of our Dialog, therefor it closes when focus moves to it because it thinks that's an interaction outside the current scope.