Dialog inside Form + useFormStatus.

[yayashn]

The current Dialog implementation uses portals so it can never be truly nested in any element due to its use of Portals.

This is frustrating when you want to use Form + Dialog + useFormStatus as now if you want to use all 3 and still have inputs get registered by the form inside of a dialog you have to:

• Put the form inside of the dialog
• Create a separate component for the children of the form to use the useFormStatus hook.

Inconvenient solution example:

import Dialog from "custom dialog made with shadcn components"

const InnerComponent = () => {
    const { pending } = useFormStatus();
    ...
}

const Component = () => {
  return <Dialog>
      <form>
          <InnerComponent/>
      </form>
    </Dialog>
}

//Then to use the component elsewhere
<Component/>

Whereas if we use a native <dialog/> element implementation, we can utilise this pattern:

import Dialog from "custom dialog made with native dialog element"

const Component = () => {
  const { pending } = useFormStatus();
  
  return <Dialog>
         ...
      </Dialog>
};

//Then we can just wrap a minimal form to reuse wherever
<form><Component/></form>

I propose either a solution for the current implementation or a new component using the native dialog element, unless there's already a pattern which allows for retrieving form status inside a dialog using only 1 component that someone knows of?

I've developed a solution that uses the dialog element but just want to check opinions before making a PR.