From 01b1f0de79daf58b6f1196b6dc54864f25270102 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Fri, 27 Mar 2026 18:08:09 -0400
Subject: [PATCH] fix: improve Clear Filters button functionality

Updated the clearFilters() function to properly reset the filter form
and trigger form submission.

Changes:
- Use form.reset() instead of manually clearing each input for
  cleaner, more reliable form reset
- Manually reset pagination hidden inputs (limit=50, offset=0) after
  form.reset() to ensure pagination state is properly cleared
- Changed HTMX trigger from "change" to "submit" to match the new
  visible form structure
- Simplified loadFilter function to not clear the form before
  populating, just update existing field values

The previous implementation was manually iterating through all inputs
and resetting them one by one, which was error-prone and didn't
properly handle the pagination state. The new implementation uses
the browser's native form.reset() for reliable form clearing.

This fix ensures that clicking "Clear" properly resets all filters
and pagination, allowing users to start fresh with their search.
---
 web/src/bookshelf.ts | 62 +++++++++++++++++++++-----------------------
 1 file changed, 29 insertions(+), 33 deletions(-)

diff --git a/web/src/bookshelf.ts b/web/src/bookshelf.ts
index e6a4b30..4e51ef7 100644
--- a/web/src/bookshelf.ts
+++ b/web/src/bookshelf.ts
@@ -6,19 +6,19 @@ import { showToast } from "./toast";
 function clearFilters(): void {
   const filterForm = document.getElementById("filter-form") as HTMLFormElement;
   if (!filterForm) return;
-
   // Reset all form fields
-  const inputs = filterForm.querySelectorAll("input, select");
-  inputs.forEach((input) => {
-    if (input instanceof HTMLInputElement && input.type === "checkbox") {
-      input.checked = false;
-    } else {
-      (input as HTMLInputElement).value = "";
-    }
-  });
-
-  // Trigger HTMX reload with cleared filters
-  window.htmx.trigger(filterForm, "change");
+  filterForm.reset();
+  // Manually reset pagination values
+  const limitInput = filterForm.querySelector(
+    'input[name="limit"]',
+  ) as HTMLInputElement;
+  const offsetInput = filterForm.querySelector(
+    'input[name="offset"]',
+  ) as HTMLInputElement;
+  if (limitInput) limitInput.value = "50";
+  if (offsetInput) offsetInput.value = "0";
+  // Trigger form submit with cleared filters
+  window.htmx.trigger(filterForm, "submit");
 }
 
 // Alpine.js component
@@ -91,38 +91,34 @@ Alpine.data("bookshelf", () => ({
         return;
       }
 
-      // Clear existing filter values
-      filterForm.innerHTML = `
-          <input type="hidden" name="limit" value="50"/>
-          <input type="hidden" name="offset" value="0"/>
-      `;
-
+      // Don't clear form - just update values
       // Populate form fields from filter data
       Object.entries(filterData).forEach(([key, value]) => {
         if (value) {
           // Only set non-empty values
-          const input = document.createElement("input");
-          input.type = "hidden";
-          input.name = key;
-          input.value = value;
-          filterForm.appendChild(input);
-
-          // Also update visible form fields if they exist
-          const visibleField = document.querySelector(
+          // Update visible form fields if they exist
+          const visibleField = filterForm.querySelector(
             `[name="${key}"]`,
           ) as HTMLInputElement;
           if (visibleField) {
-            visibleField.value = value;
+            if (visibleField.type === "checkbox") {
+              visibleField.checked = value === "true";
+            } else {
+              visibleField.value = value;
+            }
+          } else {
+            // Create hidden input if visible field doesn't exist
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = key;
+            input.value = value;
+            filterForm.appendChild(input);
           }
         }
       });
 
-      // Trigger HTMX to apply the filter
-      // Use the first input to trigger the change event
-      const firstInput = filterForm.querySelector("input");
-      if (firstInput) {
-        window.htmx.trigger(firstInput, "change");
-      }
+      // Trigger HTMX to apply the filter by submitting the form
+      window.htmx.trigger(filterForm, "submit");
 
       showToast(`Filter applied: ${filterName}`, "success");