Prevent the double bounce on htmx selects!

Fixes piepworks/cassettenest-roadmap#312 Thanks to croxton in the htmx Discord for the tip! https://htmx.org/attributes/hx-preserve/
piepworks · Apr 27, 2023 · 6fff2fa · 6fff2fa
1 parent 68e9651
commit 6fff2fa
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 0 deletions.
diff --git a/inventory/templates/components/section.html b/inventory/templates/components/section.html
@@ -38,6 +38,7 @@ <h3 class="border-0 mb-0 text-lg leading-6 font-medium text-stone-900 dark:text-
                         hx-target="{{ items.target }}"
                         hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                         hx-indicator=".htmx-indicator"
+                        hx-preserve
                         hx-vals='{"slug": "{{ items.slug }}"{% if items.slug == 'c' and request.GET.p %}, "p": "{{ request.GET.p }}"{% elif items.slug == 'p' and request.GET.c %}, "c": "{{ request.GET.c }}"{% endif %}}'
                         class="flex">
                         {% if items.slug == 'c' and request.GET.p %}

diff --git a/inventory/templates/components/tabs.html b/inventory/templates/components/tabs.html
@@ -12,11 +12,13 @@
     <div class="{{ size }}:hidden">
         <label for="id_{{ items.slug }}" class="sr-only">Select a tab</label>
         <form
+            id="id_{{ items.slug }}_form"
             method="get"
             hx-get="?{{ name }}={{ tab }}"
             hx-trigger="change"
             hx-target="{{ target }}"
             hx-indicator=".htmx-indicator"
+            hx-preserve
             class="flex">
             <select name="{{ name }}" id="id_{{ items.slug }}" class="block dark:bg-stone-700 dark:text-stone-200 w-full pl-3 pr-10 py-2 text-base border-stone-300 dark:border-stone-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                 {% for tab in tabs %}

diff --git a/inventory/templates/inventory/_inventory-content.html b/inventory/templates/inventory/_inventory-content.html
@@ -17,6 +17,7 @@ <h2 class="print:hidden text-xl font-semibold mt-6 mb-3">Filters</h2>
     hx-trigger="change"
     hx-indicator=".htmx-indicator"
     hx-target="#inventory-content-wrapper"
+    hx-preserve
     class="print:hidden mb-10">
     <div class="field--filter">
         <div class="flex flex-col sm:flex-row gap-3">

diff --git a/inventory/templates/inventory/_stocks-content.html b/inventory/templates/inventory/_stocks-content.html
@@ -16,6 +16,7 @@ <h1>
     hx-get="{% url 'stocks' %}"
     hx-indicator=".htmx-indicator"
     hx-trigger="change"
+    hx-preserve
     hx-target=".main-content">
     <div class="field--filter">
         <div class="flex flex-col sm:flex-row gap-3">