Click doesn't work on Radix modal close

[digant2482]

HI, my radix model closes but I am not able to click on screen after the modal closes. I am using react state to render radix modal

const [isSendDocumentModalOpen, setIsSendDocumentModalOpen] = useState(false);
{isSendDocumentModalOpen &&

}
Here's what SendDocumentModal returns

Open P.S: (isOpen == isSendDocumentModalOpen, setIsOpen == setIsSendDocumentModalOpen)

Any help would be appreciated. Thanks in advance

[benoitgrelard]

Without an example there is nothing we can do.

[and-rej]

Hi there,

I know this is late, but I recently had a problem that sounds like yours.

My scenario was that I had a Dropdown Menu where selecting an option would open a Dialog. That part worked, but when the Dialog was dismissed clicking would be broken on most of the rest of the UI.

The solution was to ensure that the Dropdown Menu Root was explicitly closed, via its open prop, before trying to show the Dialog. Something like the following pseudocode:

const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isDialogOpen, setIsDialogOpen] = useState(false);

return (
  <>
    <DropDownMenu 
      open={isMenuOpen} // This value goes to DropdownMenu Root's "open" prop.
      onOptionClick={() => {
        setIsMenuOpen(false); // Does not work without this! Dropdown must be closed first!
        setIsDialogOpen(true);
      }} 
    />
    <Dialog open={isDialogOpen} /> // Goes to Dialog Root's "open" prop.
  </>
);

See:

• DropdownMenu Root's open prop: https://www.radix-ui.com/primitives/docs/components/dropdown-menu#root
• Dialog Root's open prop: https://www.radix-ui.com/primitives/docs/components/dialog#root

I honestly don't understand why this worked for us, but another developer left this comment in our codebase that led me to the solution: "Need to make sure other portal elements are closed before opening a new one". So, I would look around for other components that can be "opened" or "closed" and review.

The only theory I have is that when clicking a DropdownMenu item Radix closes the menu but does not necessarily update any state the developer has introduced to manage "open-ness". So, if there is any disagreement about "open-ness", weird things happen.