Preserving the mount state in radix dialog

[sagar-niural]

Is there anyway that we can preserve the mounted state in radix dialog.
I dont want my form values clear when my dialog closes but by default it unmounts all the children inside DialogContent.
Trying to implement something like destroyOnClose so that it controls whether to unmount the children or not

[bytesagar]

const Modal = ({
  trigger,
  title,
  description,
  children,
  primaryButton,
  secondaryButton,
  width,
  open,
  side,
  onClose,
  defaultOpen,
  contentLayout = "padded",
  footerLeft,
  modalContentClassName,
  closeOnOverlayClick = true,
  preserveOnClose,
}: ModalProps): React.JSX.Element => {
  return (
    <ModalRoot open={open} onOpenChange={onClose} defaultOpen={defaultOpen}>
      {trigger && <ModalTrigger asChild>{trigger}</ModalTrigger>}

      <ModalContent
        width={width}
        side={side}
        closeOnOverlayClick={closeOnOverlayClick}
      >
        <>
          <ModalHeader
            className={cn({
              "min-h-[60px]": !description,
              "min-h-[77px] max-h-[77px]": description,
            })}
          >
            <div className="flex gap-4 items-center h-full">
              <div>
                <ModalTitle>{title}</ModalTitle>
                {description && (
                  <ModalDescription>{description}</ModalDescription>
                )}
              </div>
            </div>
          </ModalHeader>
          <div
            className={cn(
              { "p-4": contentLayout === "padded" },
              "flex-1",
              modalContentClassName,
            )}
          >
            {children}
          </div>

          {footerLeft || primaryButton || secondaryButton ? (
            <ModalFooter>
              <div className="">{footerLeft}</div>
              <div className="gap-3 flex justify-end items-center">
                {secondaryButton && (
                  <Button shade="neutral" {...secondaryButton} />
                )}
                {primaryButton && <Button {...primaryButton} />}
              </div>
            </ModalFooter>
          ) : (
            <div className="h-2" />
          )}
        </>
      </ModalContent>
    </ModalRoot>
  );
};

This is how I am using dialog. Now how do i preserve children state when preserveOnClose is true. By default it unmounts the children when modal closed

[Ojay]

There are a few requests for this across the various discussions/issues, but any answers focus on other primitives, like Tabs or Dropdown Menus. I've yet to find any solution for Dialogs. Commonly desired pattern seem to be:

1. There's an expensive request in the Dialog, which ends up being made repeatedly as the Dialog is created/removed from the DOM
2. The Dialog contains important SEO data that needs indexing
3. The dialog is being used to provide site navigation, which overlaps with point 2 and would also impact those using screen-readers

Shadcn/UI has a Sidebar component, which you can specify as collapsible. This is a great example of solving point 3. The Dialog is the most appropriate component to replicate this drawer-like UI; see @emilkowalski's Vaul. The unmounting of the dialog undermines that, as important content is nuked every time the dialog is closed.

This is a common navigation pattern for mobile, so I'd say it warrants real consideration and could be as simple, at the surface level anyway, as adding a prop to the Portal.