Nesting a form in a dialog or dropdown

[pasqualevitiello]

I am wrapping a form inside a dropdown component like this:

"use client";

import Link from "next/link";
import { signOut } from "@/actions/auth";
import { AvatarIcon } from "@radix-ui/react-icons";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button";

export default function UserDropdown() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary" size="icon" className="rounded-full">
          <AvatarIcon className="h-5 w-5" />
          <span className="sr-only">Toggle user menu</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem asChild>
          <Link className="cursor-pointer" href="/account">Settings</Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <form action={signOut}>
            <button className="text-left w-full" type="submit">
              Logout
            </button>
          </form>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

When I inspect the page, I see this error in the action attribute: javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')

Even with this error, the form seems to work fine. So I've tried refactoring the code to address the error:

"use client";

import Link from "next/link";
import { signOut } from "@/actions/auth";
import { AvatarIcon } from "@radix-ui/react-icons";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button";

export default function UserDropdown() {

  const handleSignOut = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    await signOut();
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary" size="icon" className="rounded-full">
          <AvatarIcon className="h-5 w-5" />
          <span className="sr-only">Toggle user menu</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem asChild>
          <Link className="cursor-pointer" href="/account">Settings</Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <form onSubmit={handleSignOut}>
            <button className="text-left w-full" type="submit">
              Logout
            </button>
          </form>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

I couldn't find any similar examples in the documentation or in the repository examples either. Is it ok using the onSubmit event in this case?