Form inside Drawer

[lafray]

Problem

estou com um problema de estilo que acho que deve ser simples de resolver mas simplesmente não estou vendo como.

A estrutura proposta na documentação do Drawer é:

<DrawerProvider>
  <DrawerTrigger asChild>
    <Button>Open</Button>
  </DrawerTrigger>
  <DrawerPopover>
    <DrawerHeader>
      <DrawerHeading>Drawer Heading</DrawerHeading>
      <DrawerDismiss />
    </DrawerHeader>
    <DrawerContent>
      Content goes here
    </DrawerContent>
    <DrawerFooter>
      <Button size="large">
        Label
      </Button>
      <Button variant="primary" size="large">
        Label
      </Button>
    </DrawerFooter>
  </DrawerPopover>
</DrawerProvider>

Imagino que seja comum cenários como o que estou lidando, onde o DrawerContent é um form e os botões do DrawerFooter que fazem o save e reset do form. Nesse cenário precisamos então adicionar uma Tag <form> a esta arvore de elementos. O problema surge justamente ai.

Se <form> é colocado como child do popover (englobando o resto), como abaixo

<DrawerProvider>
  <DrawerTrigger asChild>
    <Button>Open</Button>
  </DrawerTrigger>
  <DrawerPopover>
    <form> {/* here */}
      <DrawerHeader>
        <DrawerHeading>Drawer Heading</DrawerHeading>
        <DrawerDismiss />
      </DrawerHeader>
      <DrawerContent>
        Content goes here
      </DrawerContent>
      <DrawerFooter>
        <Button size="large">
          Label
        </Button>
        <Button variant="primary" size="large">
          Label
        </Button>
      </DrawerFooter>
    </form> {/* here */}
  </DrawerPopover>
</DrawerProvider>

Os estilos dos elementos deixam de se comportar como o esperado. O footer não fica no botton e o scroll não se comporta como esperado.

Por outro lado, se coloco acima de popover, como abaixo:

<DrawerProvider>
  <DrawerTrigger asChild>
    <Button>Open</Button>
  </DrawerTrigger>
  <form> {/* here */}
    <DrawerPopover>
      <DrawerHeader>
        <DrawerHeading>Drawer Heading</DrawerHeading>
        <DrawerDismiss />
      </DrawerHeader>
      <DrawerContent>
        Content goes here
      </DrawerContent>
      <DrawerFooter>
        <Button size="large">
          Label
        </Button>
        <Button variant="primary" size="large">
          Label
        </Button>
      </DrawerFooter>
    </DrawerPopover>
  </form> {/* here */}
</DrawerProvider>

Os botões não funcionam, pois o form não fica pomo parent dos elementos no do, uma vez que o popover é renderizado em um portal.

Se coloco mais internamente que a primeira opção, o <form> não consigue conter todos os elements necessários. E se é colocado qualquer lugar acima, mantence o problema de estar fora do portal.

Não achei nenhuma prop asChild para fazer o popover ser um form tbm...

tem alguma solução esperada para esse cenário?

Expected behavior

Esperava que fivesse a prop asChild para que o drawer fosse o form sem afetar qualquer comportamento ou estilo.

Reproducible Example

No response

Suggested solution

No response

Additional context

No response

Package

No response

Packages version

No response

Browser

No response

Package Manager

pnpm