More logic for dropdown. Hooray!

inventory/static/js/dropdown.js

@@ -63,6 +63,7 @@ const DropdownWidget = (() => {
             } else {
                 clearButton.classList.add("d-none");
                 button.classList.remove("rounded-end-0");
+                button.classList.remove("border-end-0");
                 button.classList.add("rounded-end");
             }
         }
@@ -97,8 +98,68 @@ function DropDown(cfg) {
         refreshUrl: cfg.refreshUrl,
         selectUrl: cfg.selectUrl,
 
+        selectedId: null,
+        selectedLabel: '',
+
+        init() {
+            const v = this.$refs.hidden?.value || '';
+            if (v) {
+                this.selectedId = v;
+                this.$refs.clear?.classList.remove('d-none');
+            }
+        },
+
         itemSelect(e) {
-            console.log(e);
+            const a = e.currentTarget;
+            const id = a.dataset.invValue || a.getAttribute('data-inv-value');
+            const label = a.textContent.trim();
+
+            const hidden = this.$refs.hidden;
+            const button = this.$refs.button;
+            const clear = this.$refs.clear;
+
+            this.selectedId = id;
+            this.selectedLabel = label;
+            if (hidden) hidden.value = id;
+
+            if (button) {
+                button.textContent = label || '-';
+                button.dataset.invValue = id;
+                button.classList.add("rounded-end-0");
+                button.classList.add("border-end-0");
+                button.classList.remove("rounded-end");
+            }
+
+            clear?.classList.toggle('d-none', !id);
+
+            if (this.selectUrl) {
+                fetch(this.selectUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ id })
+                }).catch(() => {});
+            }
+        },
+
+        clearSelection() {
+            const hidden = this.$refs.hidden;
+            const button = this.$refs.button;
+            const clear = this.$refs.clear;
+
+            this.selectedId = '';
+            this.selectedLabel = '';
+
+            if (hidden) hidden.value = '';
+            if (button) {
+                button.textContent = '-';
+                button.removeAttribute('data-inv-value');
+
+                button.classList.remove("rounded-end-0");
+                button.classList.remove("border-end-0");
+                button.classList.add("rounded-end");
+            }
+            clear?.classList.add('d-none');
+            this.$dispatch('dropdown:cleared', {});
         }
     };
 }

inventory/templates/fragments/_dropdown_fragment.html

@@ -55,22 +55,25 @@
         refreshUrl: {{ refresh_url|tojson if refresh_url else "null" }},
         selectUrl: {{ select_url|tojson if select_url else "null" }}
     })'
-    hx-preserve>
+    hx-preserve x-init="init()">
     <div class="btn-group w-100">
         <button
             class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item and enabled %}-0 border-end-0{% endif %} dropdown-button"
             type="button" data-bs-toggle="dropdown" data-inv-value="{{ current_item.id if current_item else '' }}"
             id="{{ id }}Button" {% if not enabled %} disabled{% endif %}
-            style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
+            style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}"
+            x-ref="button">
             {{ current_item.identifier if current_item else '-' }}
         </button>
         <button
             class="btn btn-outline-danger rounded-end font-weight-bold border-start-0{% if not current_item or not enabled %} d-none{% endif %}"
             type="button" id="{{ id }}ClearButton"
-            style="z-index: 9999; border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
+            style="z-index: 9999; border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}"
+            x-ref="clear"
+            @click="clearSelection">
             {{ icons.render_icon('x-lg', 16) }}
         </button>
-        <input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
+        <input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}" x-ref="hidden">
         <ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}">
             <input type="text"
                 class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0 dropdown-search-input"