fix: Handles forms that was on change

fixes #38

autocomplete/static/autocomplete/js/autocomplete.js

@@ -1,3 +1,10 @@
+function phac_aspc_autocomplete_trigger_change(container_id) {
+    setTimeout(() => {
+        const container = document.getElementById(container_id);
+        const el = container.querySelector('.textinput');
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+    }, 0)
+}
 
 function phac_aspc_autocomplete_clear_focus(container, activate_ring) {
     const hasFocus = container.querySelectorAll('.hasFocus'); 

autocomplete/templates/autocomplete/component.html

@@ -7,7 +7,6 @@
   <div
     id="{{ component_id }}__container"
     class="phac_aspc_form_autocomplete"
-    hx-preserve
   >
     {% comment %} Hidden input elements used to maintain the component's state {% endcomment %}
     {% comment %} and used when submitting forms {% endcomment %}
@@ -67,11 +66,17 @@
   </div>
 </div>
 {% comment %} This code snippet loads the required CSS and JS if not already loaded. {% endcomment %}
-<script>
+<script
+    data-componentid="{{ component_id }}"
+    data-css="{% static 'autocomplete/css/autocomplete.css' %}"
+    data-js="{% static "autocomplete/js/autocomplete.js" %}"
+    data-toggleurl="{% url route_name method='toggle' %}"
+>
     (function () {
+        const { componentid, css, js, toggleurl } = document.currentScript.dataset;
         // Add CSS if not already added
         const ln = document.createElement('link');
-        ln.href = '{% static 'autocomplete/css/autocomplete.css' %}';
+        ln.href = css;
         ln.rel = 'stylesheet';
         if (!Array.from(document.querySelectorAll('link')).map(s => s.href).includes(ln.href)) {
             document.getElementsByTagName('head')[0].appendChild(ln);
@@ -80,28 +85,28 @@
         {% comment %} If component is disabled no JS is required {% endcomment %}
         // Add JS if not already added
         const sc = document.createElement('script');
-        sc.src = '{% static "autocomplete/js/autocomplete.js" %}';
+        sc.src = js;
         if (!Array.from(document.querySelectorAll('script')).map(s => s.src).includes(sc.src)) {
             document.body.appendChild(sc);
         }
         // Add click handler on container to set focus on <input> box
-        document.querySelector('#{{ component_id }}__container').addEventListener(
+        document.querySelector(`#${componentid}__container`).addEventListener(
             'mousedown',
             function(event) {
                 const container = event.target.closest('.phac_aspc_form_autocomplete');
                 const id = container.getAttribute('id');
                 phac_aspc_autocomplete_blur_skip[id] = true;
             }
         );
-        document.querySelector('#{{ component_id }}__container').addEventListener(
+        document.querySelector(`#${componentid}__container`).addEventListener(
             'mouseup',
             function(event) {
                 const container = event.target.closest('.phac_aspc_form_autocomplete');
                 const id = container.getAttribute('id');
                 phac_aspc_autocomplete_blur_skip[id] = false;
             }
         );
-        document.querySelector('#{{ component_id }}__container').addEventListener(
+        document.querySelector(`#${componentid}__container`).addEventListener(
             'click',
             function(event) {
                 if (
@@ -115,27 +120,31 @@
         );
         document.body.addEventListener(
             'htmx:afterSettle', (event) => {
-                if (event.detail.elt.getAttribute('id') === '{{ component_id }}__items') {
+                if (event.detail.elt.getAttribute('id') === `${componentid}__items`) {
                     const shown = event.detail.elt.classList.contains('show');
-                    const el = document.querySelector('#{{ component_id }}__textinput');
+                    const el = document.querySelector(`#${componentid}__textinput`);
                     el.setAttribute('aria-expanded', shown);	
+                } else if (
+                    event.detail.elt.getAttribute('id') === `${componentid}__textinput` &&
+                    event.detail.pathInfo.requestPath === toggleurl
+                ) {
+                    phac_aspc_autocomplete_trigger_change(`${componentid}__container`);
                 }
             }
         );
         document.body.addEventListener(
-        //document.querySelector('#{{ component_id }}__textinput').addEventListener(
             'htmx:oobAfterSwap', (event) => {
-                if (event.detail.target.getAttribute('id') == '{{ component_id }}__textinput') {
+                if (event.detail.target.getAttribute('id') == `${componentid}__textinput`) {
                     setTimeout(() => {
-                        const el = document.querySelector('#{{ component_id }}__textinput');
-                        phac_aspc_autocomplete_set_initial_value(document.querySelector('#{{ component_id }}__container'), true);
+                        const el = document.querySelector(`#${componentid}__textinput`);
+                        phac_aspc_autocomplete_set_initial_value(document.querySelector(`#${componentid}__container`), true);
                         el.selectionStart = el.selectionEnd = el.value.length;
                     }, 0)
                 }
             }
         );
         document.body.addEventListener('htmx:configRequest', function(event) {
-            const container = document.querySelector('#{{ component_id }}__container');
+            const container = document.querySelector(`#${componentid}__container`);
             if (
                 container.contains(event.detail.elt) &&
                 event.detail.path.endsWith('/toggle')

autocomplete/templates/autocomplete/item.html

@@ -70,4 +70,8 @@
             {% endif %}
         {% endfor %}
     {% endif %}
+    <script data-componentid="{{ component_id }}">
+        phac_aspc_autocomplete_trigger_change(document.currentScript.dataset.componentid + '__container');
+    </script>
+
 {% endif %}