Open Jailawi opened 11 months ago
Could you create a CodeSandbox reproduction?
Could you create a CodeSandbox reproduction?
Created this: CodeSandbox
Not sure why this happens, but either way it's the best way to expose a handler like onCancel
and call the state setter in the dropdown component itself like so:
// In your dropdown menu component
<Dialog onCancel={() => setDropdownMenuOpen(false)} />
I checked this in your CodeSandbox and it resolves the issue you mentioned https://codesandbox.io/p/devbox/ecstatic-dawn-fmq9vq
I tried the same steps in the CodeSandBox you linked however, the issue remains where the app freezes after 10-20 tries.
Looks like this has not been fixed yet. Is there a workaround for this?
@benoitgrelard do you have an idea for what's going on? Feels like I'm missing something obvious
It seems that when closing the dialog or dropdown menu it is not cleaning correctly and pointer-events: none
remains in the body. you can use setOpen(false)
in the onCloseAutoFocus
callback in Dialog.Content
but this will wait for the Dialog exit animation. Another alternative I believe using setTimeout(() => setOpen(false))
will fix it
@joaom00 The setTimeout solves my problem when I try to close the dropdown menu after closing the dialog! Thanks!
Problem
I'm using a dropdown-menu component with a select-option (button) when selected opens a dialog component. I would like the drop-menu to close when the dialog is closed. I've tried with
const [open, setOpenDropMenu] = useState(false);
Used in drop-menu like:
<DropdownMenu.Root open={open} onOpenChange={setOpenDropMenu}>
The setOpenDropMenu is sent in as a prop to the dialog component and is used when the dialog is closed like:
setOpenDropMenu(false);
This works, but not all the time. It sometimes freezes the whole application and no button or link becomes clickable unless the whole website is refreshed.
Could it be a race condition problem? How can I resolve this in the best manner?