diff --git a/app/checkout/components/CheckoutContent.tsx b/app/checkout/components/CheckoutContent.tsx index 5a8b610..3f8418c 100644 --- a/app/checkout/components/CheckoutContent.tsx +++ b/app/checkout/components/CheckoutContent.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useRef, useState } from "react"; +import { forwardRef, useEffect, useRef, useState } from "react"; import Link from "next/link"; import Image from "next/image"; import { useRouter } from "next/navigation"; @@ -69,17 +69,20 @@ function validateVatIdFormat(value: string): string { return isValidVatId(normalizeVatId(value)) ? "" : "Ungültiges USt-IdNr.-Format (z. B. DE123456789)."; } -function FormField({ - label, - wrapperClassName = "flex-1 min-w-0", - error, - ...props -}: { label: string; wrapperClassName?: string; error?: string } & React.InputHTMLAttributes) { +// forwardRef so callers can imperatively .focus() a specific field (see +// the "Andere E-Mail-Adresse verwenden" handler below) — plain props +// couldn't do that, and every other FormField usage is unaffected since +// ref is optional. +const FormField = forwardRef< + HTMLInputElement, + { label: string; wrapperClassName?: string; error?: string } & React.InputHTMLAttributes +>(function FormField({ label, wrapperClassName = "flex-1 min-w-0", error, ...props }, ref) { return ( ); -} +}); export function CheckoutContent({ shippingMethods, @@ -150,6 +153,10 @@ export function CheckoutContent({ // down the page without ever blurring the email field first (e.g. // browser autofill). const loginGateRef = useRef(null); + // Focused after "Andere E-Mail-Adresse verwenden" clears the field below + // — the shopper explicitly asked to type a different one, so the cursor + // should already be waiting there instead of making them click in. + const emailInputRef = useRef(null); const [loginPassword, setLoginPassword] = useState(""); const [loginError, setLoginError] = useState(null); const [loggingIn, setLoggingIn] = useState(false); @@ -753,6 +760,7 @@ export function CheckoutContent({ actual rendered width in the 2-col row above (each half of a gap-4 flex row), instead of stretching full-width. */}