Solidjs: When using lazyMount, <Portal> is always rendered

[ylc395]

    <Dialog.Root lazyMount unmountOnExit open={props.open} onOpenChange={handleOpenChange}>
      <Portal mount={document.body>
        <Dialog.Backdrop class="fixed inset-0 bg-black opacity-30 z-10" />
        <Dialog.Positioner class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
          {props.children}
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>

There is always an empty div element in document.body, even if Dialog is not mounted. Other components have the same issue.

[segunadebayo]

This is a Solid.js design issue since Portal's always render a div in Solid.js. I don't see a way to make it empty.

Perhaps remove it from the DOM by hooking into the onExitComplete callback? or props.open

[ivancuric]

How is it a Solid.js issue if the wrapper Dialog.Root component controls the conditional rendering of its children?

[ivancuric]

Alternatively, wrap the Portal in a Show component.

How would conditionally rendering the contents interact with lazy mount?