Trigger filter form on change and search, as well as submit as before

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

@@ -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",

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;

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);

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 }}