ui
ui copied to clipboard
Unexpected Portal behaviour - does not reset state
I'm using RadixUI Dialog
(https://www.radix-ui.com/primitives/docs/components/dialog) and I want to completely reset its state on closing. Here is a working example where I moved the its content to separate component which define input
state: https://codesandbox.io/p/devbox/pedantic-hellman-4k565n?file=%2FApp.jsx%3A17%2C27
Try to open modal, set some content to input and close it. Then try to open it again and input is correctly empty so it reset entirely. HOWEVER, when I move Dialog.DialogPortal
to ButtonDialogContent
component, the state does not reset at all and when reopening, the old vallue is shown. Why does it happen?
@piszczu4
The reason why it is happening is that radix-ui/dialogs uses react-portals where the Dialog.DialogPortal
is not present in the Original DOM
but present in the Virtual DOM
and when the Dialog
is being triggered the Dialog.DialogPortal
is present in the Original DOM
react-portals won't re-render any state and the state will be preserved(since they are present in the Virtual DOM
).
Hence when you move the component Dialog.DialogPortal
inside ButtonDialogContent
, the ButtonDialogContent
will behave as a portal(won't re-render) and preserve the state, But if use the state inside the ButtonDialogContent
without moving Dialog.DialogPortal
then the component ButtonDialogContent
will re-render but the Dialog.DialogPortal
will remain un-rendered
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.