rework user dropdown for logout button and fix tests

Author: kentcdodds

app/components/user-dropdown.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react'
-import { useSubmit, Link, Form } from 'react-router'
+import { Link, Form } from 'react-router'
 import { getUserImgSrc } from '#app/utils/misc.tsx'
 import { useUser } from '#app/utils/user.ts'
 import { Button } from './ui/button'
@@ -14,10 +14,9 @@ import { Icon } from './ui/icon'
 
 export function UserDropdown() {
 	const user = useUser()
-	const submit = useSubmit()
 	const formRef = useRef<HTMLFormElement>(null)
 	return (
-		<DropdownMenu modal={false}>
+		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<Button asChild variant="secondary">
 					<Link
@@ -53,20 +52,15 @@ export function UserDropdown() {
 							</Icon>
 						</Link>
 					</DropdownMenuItem>
-					<DropdownMenuItem
-						asChild
-						// this prevents the menu from closing before the form submission is completed
-						onSelect={async (event) => {
-							event.preventDefault()
-							await submit(formRef.current)
-						}}
-					>
-						<Form action="/logout" method="POST" ref={formRef}>
-							<Icon className="text-body-md" name="exit">
-								<button type="submit">Logout</button>
-							</Icon>
-						</Form>
-					</DropdownMenuItem>
+					<Form action="/logout" method="POST" ref={formRef}>
+						<DropdownMenuItem asChild>
+							<button type="submit" className="w-full">
+								<Icon className="text-body-md" name="exit">
+									Logout
+								</Icon>
+							</button>
+						</DropdownMenuItem>
+					</Form>
 				</DropdownMenuContent>
 			</DropdownMenuPortal>
 		</DropdownMenu>

tests/e2e/2fa.test.ts

@@ -37,7 +37,7 @@ test('Users can add 2FA to their account and use it when logging in', async ({
 	await expect(main.getByRole('link', { name: /disable 2fa/i })).toBeVisible()
 
 	await page.getByRole('link', { name: user.name ?? user.username }).click()
-	await page.getByRole('button', { name: /logout/i }).click()
+	await page.getByRole('menuitem', { name: /logout/i }).click()
 	await expect(page).toHaveURL(`/`)
 
 	await page.goto('/login')