fix(quellen): Suchformular bricht fetch durch Form-Submit ab

Bug: ``runSearch`` ist async und returnt damit Promise<false>. Im
Inline-Handler ``onsubmit="return runSearch(event)"`` interpretiert der
Browser den Promise als truthy → Default-Form-Submit läuft an, die
Page navigiert, und der gerade abgesetzte fetch bricht mit
"Failed to fetch" ab. Im echten Browser merkt man's beim Klick auf
"Suchen" oder Enter im Suchfeld: Status bleibt auf "Suche läuft …"
hängen, keine Ergebnisse erscheinen.

Fix: Bindung über ``addEventListener('submit', ...)`` mit
``event.preventDefault()`` synchron vor dem async runSearch-Aufruf.
JS-Direktaufruf von ``runSearch()`` (z.B. bei Filter-Wechsel)
funktioniert weiterhin.

Gefunden bei E2E-Browser-Smoketest mit Playwright.
This commit is contained in:
Dotty Dotter 2026-05-09 00:58:30 +02:00
parent d5c96e6888
commit 501f32b9ae

View File

@ -196,7 +196,7 @@
Wortunscharf — Endungen sind egal, verwandte Begriffe werden ebenfalls
gefunden.
</p>
<form id="quellen-search-form" class="search-box" onsubmit="return runSearch(event)">
<form id="quellen-search-form" class="search-box">
<input type="text" id="quellen-q" name="q" placeholder="z.B. Klimaschutz, soziale Gerechtigkeit, Mietpreisbremse"
autocomplete="off" minlength="2" maxlength="200">
<button type="submit" id="quellen-q-btn">Suchen</button>
@ -380,8 +380,21 @@ async function runSearch(ev) {
return false;
}
// Re-Run bei Filter-Wechsel, wenn schon eine Query da ist
// Form-Submit + Filter-Wechsel binden
document.addEventListener('DOMContentLoaded', () => {
// Wichtig: `runSearch` ist async, returnt Promise<false>. Das ist truthy,
// also würde `onsubmit="return runSearch(event)"` das Default-Submit
// NICHT verhindern und der fetch würde mit "Failed to fetch" abbrechen,
// weil die Page navigiert. Stattdessen via addEventListener binden — da
// ist `event.preventDefault()` synchron geblieben, bevor der Promise
// resolvt.
const form = document.getElementById('quellen-search-form');
if (form) {
form.addEventListener('submit', (ev) => {
ev.preventDefault();
runSearch();
});
}
document.querySelectorAll('input[name="qfilter"]').forEach(r => {
r.addEventListener('change', () => {
const q = (document.getElementById('quellen-q') || {}).value || '';