From b6668e72ef0ffb9169c12c70fe76a9ccc18a7284 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Mon, 3 Apr 2023 12:45:15 +0200
Subject: [PATCH] Trigger filter form on change and search, as well as submit
 as before
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed the invoice number field’s type to search to add the delete icon
on Chromium.  Firefox does not add that icon, but i do not care; it is
still better that type="text".

Had to emit the change event to the numerus-tag field, otherwise the
form would not detect the change.

I also can not use keyup as a trigger because the changed modifier can
not be used in the <form>, as nothing ever changes, i do not know how to
trigger the form from children (i.e., data-hx-trigger on the <input>
does nothing), and i can not trigger for just any keyup, or i would
make the request even if they only moved the cursor with the arrow keys,
which is very confusing as Firefox resets the position (this may be due
the fact that i reload the whole <main>, but still).
---
 pkg/invoices.go                    | 2 +-
 web/static/numerus.css             | 2 +-
 web/static/numerus.js              | 8 ++++++--
 web/template/invoices/index.gohtml | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/pkg/invoices.go b/pkg/invoices.go
index 343ae74..a3a630d 100644
--- a/pkg/invoices.go
+++ b/pkg/invoices.go
@@ -175,7 +175,7 @@ func newInvoiceFilterForm(ctx context.Context, conn *Conn, locale *Locale, compa
 		InvoiceNumber: &InputField{
 			Name:  "number",
 			Label: pgettext("input", "Invoice Number", locale),
-			Type:  "text",
+			Type:  "search",
 		},
 		FromDate: &InputField{
 			Name:  "from_date",
diff --git a/web/static/numerus.css b/web/static/numerus.css
index 0854af1..a519101 100644
--- a/web/static/numerus.css
+++ b/web/static/numerus.css
@@ -314,7 +314,7 @@ main {
     margin-top: 2rem;
 }
 
-input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea {
+input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea {
     background-color: var(--numerus--background-color);
     border: 1px solid var(--numerus--color--black);
     border-radius: 0;
diff --git a/web/static/numerus.js b/web/static/numerus.js
index a607763..3aea63b 100644
--- a/web/static/numerus.js
+++ b/web/static/numerus.js
@@ -347,7 +347,11 @@ class Tags extends HTMLDivElement {
     }
 
     rebuild() {
-        this.input.value = this.tags.join(',');
+        const newValue = this.tags.join(',');
+        if (newValue !== this.input.value) {
+            this.input.value = newValue;
+            this.input.dispatchEvent(new Event('change', {bubbles: true}));
+        }
         this.tagList.querySelectorAll('.tag').forEach((tag) => tag.remove());
         if (this.tags.length === 0) {
             this.search.setAttribute('placeholder', this.label.textContent);
@@ -421,7 +425,7 @@ htmx.onLoad((target) => {
     }
 })
 
-htmx.on('htmx:configRequest', function(e) {
+htmx.on('htmx:configRequest', function (e) {
     const element = e.detail.elt;
     if (element && element.nodeName === 'FORM') {
         let submitter = e.detail.triggeringEvent.submitter;
diff --git a/web/template/invoices/index.gohtml b/web/template/invoices/index.gohtml
index c3fa9c5..001c85a 100644
--- a/web/template/invoices/index.gohtml
+++ b/web/template/invoices/index.gohtml
@@ -27,7 +27,7 @@
 {{ define "content" }}
     {{- /*gotype: dev.tandem.ws/tandem/numerus/pkg.InvoicesIndexPage*/ -}}
     <div aria-label="{{( pgettext "Filters" "title" )}}">
-        <form method="GET" action="{{ companyURI "/invoices"}}" data-hx-target="main" data-hx-boost="true">
+        <form method="GET" action="{{ companyURI "/invoices"}}" data-hx-target="main" data-hx-boost="true" data-hx-trigger="change,search,submit">
             {{ with .Filters }}
                 {{ template "select-field" .Customer }}
                 {{ template "select-field" .InvoiceStatus }}