Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

fix: improve Clear Filters button functionality

Browse Source 
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.
This commit is contained in:
john-okeefe
2026-03-27 18:08:09 -04:00
parent 77cbeb0bcf
commit 01b1f0de79
1 changed files with 29 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/bookshelf.ts
+29 -33
View File
@@ -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");