fix: reset faq search with every new search, improve legibility

closes #86965w98m
This commit is contained in:
Björn Fromme
2026-06-15 16:14:57 +02:00
parent 9434585959
commit 977deafb57
2 changed files with 6 additions and 7 deletions
@@ -21,11 +21,10 @@ export default class extends Controller {
} }
const pattern = new RegExp(value, 'i') const pattern = new RegExp(value, 'i')
this.entryTargets.forEach(entry => { this.entryTargets.forEach(entry => {
const question = entry.childNodes[0].textContent const question = entry.querySelector('button span').textContent
const answer = entry.childNodes[1].textContent const answer = entry.querySelector('[data-rte-content]').textContent
if (!question.match(pattern) && !answer.match(pattern)) { const matches = question.match(pattern) || answer.match(pattern)
entry.classList.add('hidden') entry.classList.toggle('hidden', !matches)
}
}) })
} }
} }
@@ -5,7 +5,7 @@
<f:if condition="{faqs}"> <f:if condition="{faqs}">
<div class="bg-winter my-4"> <div class="bg-winter my-4">
<div class="bg-ep-primary/80 sbw:bg-sbw-primary/80 uch:bg-uch-primary/80 ser:bg-ser-primary/80 py-8"> <div class="bg-ep-primary/90 sbw:bg-sbw-primary/90 uch:bg-uch-primary/90 ser:bg-ser-primary/90 py-8">
<div class="container" <div class="container"
data-controller="faq"> data-controller="faq">
<span class="headline--3 text-white uppercase mb-4"> <span class="headline--3 text-white uppercase mb-4">
@@ -28,7 +28,7 @@
data-faq-target="entry"> data-faq-target="entry">
<button type="button" <button type="button"
aria-label="Antwort anzeigen/ausblenden" aria-label="Antwort anzeigen/ausblenden"
class="uppercase text-lg text-white flex items-center space-x-4" class="text-lg md:text-xl text-white flex items-center space-x-4"
data-action="collapse#toggle"> data-action="collapse#toggle">
{ep:icon(icon: 'chevron-right', class: 'w-4 h-4 text-white transition-transform duration-200 ease-in-out', data: '{collapse-target: \'icon\'}')} {ep:icon(icon: 'chevron-right', class: 'w-4 h-4 text-white transition-transform duration-200 ease-in-out', data: '{collapse-target: \'icon\'}')}
<span class="text-left"> <span class="text-left">