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:
parent
d5c96e6888
commit
501f32b9ae
@ -196,7 +196,7 @@
|
|||||||
Wortunscharf — Endungen sind egal, verwandte Begriffe werden ebenfalls
|
Wortunscharf — Endungen sind egal, verwandte Begriffe werden ebenfalls
|
||||||
gefunden.
|
gefunden.
|
||||||
</p>
|
</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"
|
<input type="text" id="quellen-q" name="q" placeholder="z.B. Klimaschutz, soziale Gerechtigkeit, Mietpreisbremse"
|
||||||
autocomplete="off" minlength="2" maxlength="200">
|
autocomplete="off" minlength="2" maxlength="200">
|
||||||
<button type="submit" id="quellen-q-btn">Suchen</button>
|
<button type="submit" id="quellen-q-btn">Suchen</button>
|
||||||
@ -380,8 +380,21 @@ async function runSearch(ev) {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Re-Run bei Filter-Wechsel, wenn schon eine Query da ist
|
// Form-Submit + Filter-Wechsel binden
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
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 => {
|
document.querySelectorAll('input[name="qfilter"]').forEach(r => {
|
||||||
r.addEventListener('change', () => {
|
r.addEventListener('change', () => {
|
||||||
const q = (document.getElementById('quellen-q') || {}).value || '';
|
const q = (document.getElementById('quellen-q') || {}).value || '';
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user