Issue with Select Component Overlay Persisting After Dialog Closes in Nested Structures

[DjurovicAleksandar]

I'm experiencing an issue with a Select component inside a Dialog. When I open the Dialog, then open the Select inside it, and click outside everything, the Dialog closes as expected. However, it appears that an overlay or element from the Select remains open, making the page unresponsive to clicks until I reload.

I’ve temporarily fixed this by setting the Select's open state to false whenever the Dialog closes, like this:

onOpenChange={(open) => {
  if (!open) setSelectOpen(false);
}}

However, this isn’t ideal, as I have several deeply nested Select components within dialogs (e.g., Dialog > Tabs > Select). I tried setting the Select's portal container to the dialog element, but that only works for simpler setups and fails with nested structures.

Do you have any recommendations for handling this issue with nested dialogs and Select components?

[DjurovicAleksandar]

Update:

Using this :

 if (!open) {
          setTimeout(() => {
            document.body.style.pointerEvents = 'auto';
          }, 0);
        }

Does fix the issue, but I am not sure this is most optimal for React.