From 2378e562689052d3058776a25fdda580119ee645 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 5 Apr 2026 12:35:32 -0400
Subject: [PATCH] Fix bulk assign user search: replace broken combobox with
 typeahead
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The combobox modal used lt-combobox-list but lt.combobox looks for
lt-combobox-dropdown — it returned immediately, wiring nothing.

Replaced with lt.typeahead which is correct for single-select search:
- Filters users client-side as you type (minChars:1, debounced 150ms)
- Shows display_name (username) with highlight on match
- onSelect stores user ID and shows "✓ Name" confirmation below input
- Input auto-focuses when modal opens
- Enter key now selects first result even without arrow-key navigation
  (same fix applied to lt.combobox Enter handler)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/js/base.js      |  2 +-
 assets/js/dashboard.js | 50 +++++++++++++++++++++++-------------------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/assets/js/base.js b/assets/js/base.js
index 4d0e7e1..7bdbdf1 100644
--- a/assets/js/base.js
+++ b/assets/js/base.js
@@ -2065,7 +2065,7 @@
         if (!dropdown.classList.contains('is-open')) return;
         if (e.key === 'ArrowDown')  { e.preventDefault(); _moveFocus(1); }
         if (e.key === 'ArrowUp')    { e.preventDefault(); _moveFocus(-1); }
-        if (e.key === 'Enter')      { e.preventDefault(); if (_focusedIdx >= 0 && _items[_focusedIdx]) _select(_items[_focusedIdx]); }
+        if (e.key === 'Enter')      { e.preventDefault(); const idx = _focusedIdx >= 0 ? _focusedIdx : 0; if (_items[idx]) _select(_items[idx]); }
         if (e.key === 'Escape')     { dropdown.classList.remove('is-open'); }
         if (e.key === 'Tab')        { dropdown.classList.remove('is-open'); }
       });
diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
index 1574365..5a11ff8 100644
--- a/assets/js/dashboard.js
+++ b/assets/js/dashboard.js
@@ -552,7 +552,7 @@ function performBulkCloseAction(ticketIds) {
     });
 }
 
-var _bulkAssignUserId = null; // set by combobox onSelect
+var _bulkAssignUserId = null;
 
 function showBulkAssignModal() {
     const ticketIds = getSelectedTicketIds();
@@ -566,21 +566,20 @@ function showBulkAssignModal() {
 
     const modalHtml = `
         <div class="lt-modal-overlay" id="bulkAssignModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="bulkAssignModalTitle">
-            <div class="lt-modal">
+            <div class="lt-modal lt-modal-sm">
                 <div class="lt-modal-header">
-                    <span class="lt-modal-title" id="bulkAssignModalTitle">Assign ${ticketIds.length} Ticket(s)</span>
+                    <span class="lt-modal-title" id="bulkAssignModalTitle">[ @ ] Assign ${ticketIds.length} Ticket(s)</span>
                     <button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
                 </div>
                 <div class="lt-modal-body">
-                    <label class="lt-label">Assign to:</label>
-                    <div class="lt-combobox" id="bulkAssignCombobox">
-                        <div class="lt-combobox-input-wrap">
-                            <input type="text" class="lt-combobox-input" id="bulkAssignUserInput"
-                                   placeholder="Search users…" autocomplete="off" aria-label="Search users">
-                        </div>
-                        <ul class="lt-combobox-list" role="listbox" aria-hidden="true"></ul>
+                    <label class="lt-label" for="bulkAssignUserInput">Assign to</label>
+                    <div class="lt-typeahead" id="bulkAssignTypeahead" style="position:relative">
+                        <input type="text" class="lt-input lt-w-full" id="bulkAssignUserInput"
+                               placeholder="Type a name…" autocomplete="off" spellcheck="false"
+                               aria-label="Search users" aria-autocomplete="list">
+                        <div class="lt-typeahead-dropdown" id="bulkAssignDropdown"></div>
                     </div>
-                    <span class="lt-field-hint lt-text-muted">Type to search — supports large user lists</span>
+                    <div id="bulkAssignSelected" style="margin-top:0.4rem;font-size:0.75rem;color:var(--terminal-cyan);min-height:1.2em"></div>
                 </div>
                 <div class="lt-modal-footer">
                     <button data-action="perform-bulk-assign" class="lt-btn lt-btn-primary">ASSIGN</button>
@@ -592,21 +591,26 @@ function showBulkAssignModal() {
 
     document.body.insertAdjacentHTML('beforeend', modalHtml);
     lt.modal.open('bulkAssignModal');
+    setTimeout(() => { const inp = document.getElementById('bulkAssignUserInput'); if (inp) inp.focus(); }, 120);
 
     lt.api.get('/api/get_users.php')
         .then(data => {
-            if (data.success && data.users) {
-                const input = document.getElementById('bulkAssignUserInput');
-                if (!input) return;
-                const items = data.users.map(u => ({
-                    value: String(u.user_id),
-                    label: u.display_name || u.username
-                }));
-                lt.combobox.init(input, items, {
-                    max: 1,
-                    onChange: function(selected) { _bulkAssignUserId = selected[0] || null; }
-                });
-            }
+            if (!data.success || !data.users) return;
+            const input = document.getElementById('bulkAssignUserInput');
+            if (!input) return;
+            const items = data.users.map(u => ({
+                value: String(u.user_id),
+                label: u.display_name ? u.display_name + ' (' + u.username + ')' : u.username
+            }));
+            lt.typeahead.init(input, items, {
+                minChars: 1,
+                maxResults: 8,
+                onSelect: function(item) {
+                    _bulkAssignUserId = item.value;
+                    const sel = document.getElementById('bulkAssignSelected');
+                    if (sel) sel.textContent = '✓ ' + item.label;
+                }
+            });
         })
         .catch(() => lt.toast.error('Error loading users'));
 }