From 1affcf7eaa8b033e6bc93ac0d7c5c7904efc0fc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <mail@jan-boehmer.de>
Date: Mon, 27 Jul 2026 18:21:29 +0200
Subject: [PATCH] Fix stimulus controller to allow handling multiple instances
 of the dropdown menu

---
 .../elements/search_config_controller.js          | 15 +++++++++++----
 templates/components/search.macro.html.twig       |  8 ++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/assets/controllers/elements/search_config_controller.js b/assets/controllers/elements/search_config_controller.js
index cc1557f2..87577589 100644
--- a/assets/controllers/elements/search_config_controller.js
+++ b/assets/controllers/elements/search_config_controller.js
@@ -19,18 +19,25 @@
 
 import {Controller} from "@hotwired/stimulus";
 
+
+/**
+ * Used to disable the extensive and wildcard search options, when Regex search is enabled.
+ */
 export default class extends Controller
 {
+    static targets = ["regex", "extensive", "wildcard"]
+
     connect() {
-        this.element.addEventListener('change', () => {
+
+        this.regexTarget.addEventListener('change', () => {
             this.updateOthers()
         });
     }
 
     updateOthers() {
-        let value = this.element.checked
-        let ext = document.getElementById('extensive')
-        let wild = document.getElementById('wildcard')
+        let value = this.regexTarget.checked;
+        let ext = this.extensiveTarget;
+        let wild = this.wildcardTarget;
         if (value === null) {
             return;
         }
diff --git a/templates/components/search.macro.html.twig b/templates/components/search.macro.html.twig
index 9d3851a6..afe44d44 100644
--- a/templates/components/search.macro.html.twig
+++ b/templates/components/search.macro.html.twig
@@ -5,7 +5,7 @@
             {% if show_label_instead_icon %}{% trans %}search.options.label{% endtrans %}{% else %}<i class="fa-solid fa-gear"></i>{% endif %}
             <span class="caret"></span>
         </button>
-        <div class="dropdown-menu" aria-labelledby="navbar-search-options">
+        <div class="dropdown-menu" aria-labelledby="navbar-search-options" {{ stimulus_controller('elements/search_config') }}>
             <div class="px-2" style="width: max-content;">
                 <div class="form-check">
                     <input type="checkbox" class="form-check-input" id="search_name" name="name" value="1" checked {{ stimulus_controller('elements/localStorage_checkbox') }}>
@@ -67,15 +67,15 @@
                 {% endif %}
                 <hr>
                 <div class="form-check">
-                    <input type="checkbox" class="form-check-input" id="regex" name="regex" value="1" {{ stimulus_controller('elements/localStorage_checkbox elements/search_config') }}>
+                    <input type="checkbox" class="form-check-input" id="regex" name="regex" value="1" {{ stimulus_controller('elements/localStorage_checkbox') }} {{ stimulus_target('elements/search_config', 'regex') }}>
                     <label for="regex" class="form-check-label justify-content-start">{% trans %}search.regexmatching{% endtrans %}</label>
                 </div>
                 <div class="form-check">
-                    <input type="checkbox" class="form-check-input" id="extensive" name="extensive" value="0" {{ stimulus_controller('elements/localStorage_checkbox') }}>
+                    <input type="checkbox" class="form-check-input" id="extensive" name="extensive" value="0" {{ stimulus_controller('elements/localStorage_checkbox') }} {{ stimulus_target('elements/search_config', 'extensive') }}>
                     <label for="extensive" class="form-check-label justify-content-start">{% trans %}search.extensive_matching{% endtrans %}</label>
                 </div>
                 <div class="form-check">
-                    <input type="checkbox" class="form-check-input" id="wildcard" name="wildcard" value="0" {{ stimulus_controller('elements/localStorage_checkbox') }}>
+                    <input type="checkbox" class="form-check-input" id="wildcard" name="wildcard" value="0" {{ stimulus_controller('elements/localStorage_checkbox') }} {{ stimulus_target('elements/search_config', 'wildcard') }}>
                     <label for="wildcard" class="form-check-label justify-content-start">{% trans %}search.permit_wildcards{% endtrans %}</label>
                 </div>
             </div>