Unexpected Portal behaviour - does not reset state

[piszczu4]

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?

[imopbuilder]

@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

[shadcn]

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.