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:
Marco
2026-07-24 15:22:34 +00:00
parent ba830947d2
commit 36bfa3bd84
3 changed files with 13 additions and 4 deletions
+10 -1
View File
@@ -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}
+1 -1
View File
@@ -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">
+2 -2
View File
@@ -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"
},