gitmedia/presseportale
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Form-Hooks: Fehl-Scroll aufs erste Feld bei Live-Validation behoben

Browse source 
Zwei Bugs im Scroll-zum-Fehler-Helper: '[wire\:submit]' matchte das
<form> selbst, sodass jeder Klick in ein Feld den Scroll armierte
(sichtbar beim USt-ID-Live-Check im Profil); und der leere, versteckte
Flux-Error-Container unter jedem Feld galt wegen Whitespace als
':not(:empty)' — fokussiert wurde dadurch grundlos das erste Feld.
Enter-Submit wird jetzt über das submit-Event erkannt, Fehlerfelder
nur noch bei echtem Fehlertext.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-07-08 13:29:12 +00:00
parent 3297179226
commit 74e82eb643
1 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

18
resources/js/portal-form-hooks.js
View file

@ -25,11 +25,13 @@
let scrollPending = false;
// Selektoren für Buttons, die wir als "Submit-Intent" interpretieren.
// Bewusst NICHT '[wire\\:submit]': das matcht das <form> selbst, und da
// Klicks bubbeln, würde jeder Klick in irgendein Feld den Scroll armieren
// (Bug 08.07.: USt-ID-Live-Check sprang zum ersten Feld hoch).
const SUBMIT_SELECTORS = [
'[wire\\:click*="save"]',
'[wire\\:click*="submit"]',
'[wire\\:click*="update"]',
'[wire\\:submit]',
'button[type="submit"]',
].join(',');
@ -40,6 +42,14 @@
}
}, true);
// Enter-Submit in wire:submit-Forms kommt nicht als Button-Klick an —
// das submit-Event deckt ihn ab (Livewire preventet nur den Default).
document.addEventListener('submit', (event) => {
if (event.target.matches('[wire\\:submit]')) {
scrollPending = true;
}
}, true);
document.addEventListener('livewire:init', () => {
if (!window.Livewire || typeof window.Livewire.hook !== 'function') {
return;
@ -53,9 +63,13 @@
scrollPending = false;
requestAnimationFrame(() => {
// Flux rendert unter JEDEM Feld einen (hidden) Error-Container
// mit Whitespace-Inhalt — ':not(:empty)' matcht den daher auch
// ohne Fehler. Nur Container mit echtem Text zählen.
const invalid = document.querySelector('[data-flux-control][aria-invalid="true"]')
|| document.querySelector('[aria-invalid="true"]')
|| document.querySelector('[data-flux-error]:not(:empty)');
|| Array.from(document.querySelectorAll('[data-flux-error]'))
.find((el) => el.textContent.trim() !== '');
if (!invalid) {
return;