Fix checkout password focus-trap and ToDo-Karten hero CTA copy
The new-account password field's onBlur re-focused itself whenever the value was still invalid (<8 chars), the same generic pattern every other blur-validated checkout field uses. For most fields that's a helpful "fix it now" nudge, but it's a genuine trap on a password field near the end of a card — a shopper could never Tab or click the submit button until the password was already valid. Dropped just the refocus here (inline error text still appears immediately); every other field keeps the existing behavior. TodoKartenHero.tsx's price line never showed "zzgl. Versand" at all (pre-existing gap, unrelated to Kleinunternehmer), unlike Pricing.tsx/ ProductSpotlight.tsx — now consistent across all three. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -794,6 +794,16 @@ export function CheckoutContent({
|
||||
autoComplete="new-password"
|
||||
required
|
||||
minLength={8}
|
||||
// No refocusEl (3rd arg) here, unlike this form's other
|
||||
// blur-validated fields — this field is at the end of the
|
||||
// "2. Kontodaten" card, right before Card 3+ and the
|
||||
// submit button further down the page; forcing focus back
|
||||
// into it on every blur while <8 chars meant a shopper
|
||||
// could never Tab/click past it (or reach the submit
|
||||
// button at all) until the password was already valid —
|
||||
// effectively trapped. The inline red error text below
|
||||
// still appears immediately either way; only the forced
|
||||
// refocus is dropped.
|
||||
onBlur={(e) =>
|
||||
setFieldError(
|
||||
"password",
|
||||
@@ -802,7 +812,6 @@ export function CheckoutContent({
|
||||
: e.target.value.length < 8
|
||||
? "Passwort muss mindestens 8 Zeichen lang sein."
|
||||
: "",
|
||||
e.target,
|
||||
)
|
||||
}
|
||||
error={fieldErrors.password}
|
||||
|
||||
@@ -108,7 +108,7 @@ export async function TodoKartenHero() {
|
||||
<p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
|
||||
)}
|
||||
<p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
|
||||
{!kleinunternehmer && <p className="text-label text-text-muted">inkl. {taxRate}% MwSt.</p>}
|
||||
<p className="text-label text-text-muted">{kleinunternehmer ? "zzgl. Versand" : `inkl. ${taxRate}% MwSt. zzgl. Versand`}</p>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-label text-text-muted">
|
||||
|
||||
Generated
+2
-2
@@ -358,8 +358,8 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@einfach-produktiv/invoicing": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "git+https://git.mk360.de/Marco/einfach-produktiv-invoicing.git#439165c98d6c3cc5c7c7cfe6e0a08d9242983ac8",
|
||||
"version": "0.2.2",
|
||||
"resolved": "git+https://git.mk360.de/Marco/einfach-produktiv-invoicing.git#ceaa437724dae1adfd582ca209300d2ee0a10e68",
|
||||
"dependencies": {
|
||||
"@e-invoice-eu/core": "^3.1.1"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user