LotusGuild/tinker_tickets
4
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix bulk assign user search: replace broken combobox with typeahead

Browse Source 
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>
This commit is contained in:
Jared Vititoe
2026-04-05 12:35:32 -04:00
parent 025963a78f
commit 2378e56268
2 changed files with 28 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/dashboard.js
+27 -23
View File
@@ -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'));
}