From a55404b9f5891679ce2009c692c92fff849a891c Mon Sep 17 00:00:00 2001
From: Xavier Fernandez <xavier.fernandez@beta.gouv.fr>
Date: Thu, 19 Dec 2024 16:32:44 +0100
Subject: [PATCH] use htmx hook to reduce flicker

---
 itou/static/js/utils.js                 |  2 +-
 itou/templates/apply/list_for_siae.html | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/itou/static/js/utils.js b/itou/static/js/utils.js
index d84af1c3f9c..f7eac993600 100644
--- a/itou/static/js/utils.js
+++ b/itou/static/js/utils.js
@@ -205,7 +205,7 @@ htmx.onLoad((target) => {
   /**
    * JS to hide/unhide UI elements
    **/
-  querySelectorAllIncludingTarget(target, "form[data-hide-elements-when-selected]").forEach((form) => {
+  querySelectorAllIncludingTarget(target, "form[UNUSEDdata-hide-elements-when-selected]").forEach((form) => {
     form.addEventListener("change", function() {
       if (Array.from(form.elements).some((input) => input.checked)) {
         document.querySelectorAll(this.getAttribute("data-hide-elements-when-selected")).forEach((element) => element.classList.add("d-none"))
diff --git a/itou/templates/apply/list_for_siae.html b/itou/templates/apply/list_for_siae.html
index 7c9079eaa10..f407ce58607 100644
--- a/itou/templates/apply/list_for_siae.html
+++ b/itou/templates/apply/list_for_siae.html
@@ -64,4 +64,14 @@
     {{ filters_form.media.js }}
     <script src='{% static "js/htmx_compat.js" %}'></script>
     <script src='{% static "js/htmx_dropdown_filter.js" %}'></script>
+    <script nonce="{{ CSP_NONCE }}">
+        htmx.on("htmx:oobAfterSwap", function(evt) {
+            const form = document.querySelector("form[data-hide-elements-when-selected]")
+            if (Array.from(form.elements).some((input) => input.checked)) {
+                document.querySelectorAll(form.getAttribute("data-hide-elements-when-selected")).forEach((element) => element.classList.add("d-none"))
+            } else {
+                document.querySelectorAll(form.getAttribute("data-hide-elements-when-selected")).forEach((element) => element.classList.remove("d-none"))
+            }
+        });
+    </script>
 {% endblock %}