feat: ora i menu a tendina sono freccettabili. fix: sistemata la modifica massiva nella pagina ricerca spudorata

public/css/style.css

@@ -1901,12 +1901,14 @@ body {
   white-space: nowrap;
 }
 
-.autocomplete-suggestion-item:hover {
+.autocomplete-suggestion-item:hover,
+.autocomplete-suggestion-item.selected {
   background: var(--accent-primary);
   color: #ffffff !important;
 }
 
-.autocomplete-suggestion-item:hover span {
+.autocomplete-suggestion-item:hover span,
+.autocomplete-suggestion-item.selected span {
   color: #ffffff !important;
 }
 

public/js/app.js

@@ -1080,6 +1080,67 @@ const App = {
       });
     });
   },
+
+  /**
+   * Helper to enable arrow keys (Up/Down), Enter, and Escape navigation on autocomplete inputs.
+   * @param {HTMLInputElement} inputEl 
+   * @param {HTMLElement} suggestionsEl 
+   * @param {Function} onSelect Callback(itemElement) when an item is selected via Enter or Click
+   */
+  setupAutocompleteKeyboardNavigation(inputEl, suggestionsEl, onSelect) {
+    if (!inputEl || !suggestionsEl) return;
+
+    inputEl.addEventListener('keydown', (e) => {
+      if (suggestionsEl.style.display === 'none' || !suggestionsEl.children.length) {
+        return;
+      }
+
+      const items = Array.from(suggestionsEl.querySelectorAll('.autocomplete-suggestion-item[data-id]'));
+      if (items.length === 0) return;
+
+      let currentIndex = items.findIndex(item => item.classList.contains('selected'));
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (currentIndex < items.length - 1) {
+          currentIndex++;
+        } else {
+          currentIndex = 0;
+        }
+        items.forEach((item, idx) => {
+          if (idx === currentIndex) {
+            item.classList.add('selected');
+            item.scrollIntoView({ block: 'nearest' });
+          } else {
+            item.classList.remove('selected');
+          }
+        });
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (currentIndex > 0) {
+          currentIndex--;
+        } else {
+          currentIndex = items.length - 1;
+        }
+        items.forEach((item, idx) => {
+          if (idx === currentIndex) {
+            item.classList.add('selected');
+            item.scrollIntoView({ block: 'nearest' });
+          } else {
+            item.classList.remove('selected');
+          }
+        });
+      } else if (e.key === 'Enter') {
+        if (currentIndex >= 0 && items[currentIndex]) {
+          e.preventDefault();
+          e.stopPropagation();
+          onSelect(items[currentIndex]);
+        }
+      } else if (e.key === 'Escape') {
+        suggestionsEl.style.display = 'none';
+      }
+    });
+  },
 };
 
 // Start the app when DOM is ready

public/js/views/ricercaSpudorata.js

@@ -20,6 +20,7 @@ const RicercaSpudorataView = {
   },
 
   async render() {
+    await App.ensureLookups();
     Filters.currentMode = 'spudorata';
     Filters.load();
 
@@ -48,8 +49,6 @@ const RicercaSpudorataView = {
 
     this.renderContainer(container);
     this.bindEvents();
-
-    App.ensureLookups();
   },
 
   renderContainer(container) {
@@ -541,6 +540,13 @@ const RicercaSpudorataView = {
           });
         } catch (err) { console.error(err); }
       });
+      App.setupAutocompleteKeyboardNavigation(batchQueueSearchInput, batchQueueSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          batchQueueSearchInput.value = item.dataset.name;
+          if (batchQueueIdInput) batchQueueIdInput.value = item.dataset.id;
+          batchQueueSuggestionsDiv.style.display = 'none';
+        }
+      });
       batchQueueSearchInput.addEventListener('focus', () => {
         batchQueueSearchInput.value = '';
         if (batchQueueIdInput) batchQueueIdInput.value = '';

public/js/views/ticketCreate.js

@@ -379,18 +379,14 @@ const TicketCreateView = {
             }
 
             userSuggestionsDiv.innerHTML = users.map(u => `
-              <div class="autocomplete-suggestion-item" data-login="${App.escapeHtml(u.login || '')}" data-customer-id="${App.escapeHtml(u.customer_id || '')}" data-name="${App.escapeHtml((u.first_name + ' ' + u.last_name).trim() || u.login || '')}">
+              <div class="autocomplete-suggestion-item" data-id="${App.escapeHtml(u.login || '')}" data-login="${App.escapeHtml(u.login || '')}" data-customer-id="${App.escapeHtml(u.customer_id || '')}" data-name="${App.escapeHtml((u.first_name + ' ' + u.last_name).trim() || u.login || '')}">
                 <strong>${App.escapeHtml(u.first_name)} ${App.escapeHtml(u.last_name)}</strong>
                 <span style="font-size:0.75rem; color:var(--text-muted); margin-left:var(--space-xs); font-weight:normal;">(Login: ${App.escapeHtml(u.login || '')} | Azienda: ${App.escapeHtml(u.customer_id || '—')})</span>
               </div>
             `).join('');
             userSuggestionsDiv.style.display = 'block';
 
-            // Use mousedown instead of click to fire before blur event
-            userSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => {
-              if (item.dataset.login) {
-                item.addEventListener('mousedown', (e) => {
-                  e.preventDefault(); // prevent input from losing focus before value is set
+            const selectUserItem = (item) => {
               userSearchInput.value = item.dataset.name;
               customerUserIdInput.value = item.dataset.login;
               userSuggestionsDiv.style.display = 'none';
@@ -400,6 +396,14 @@ const TicketCreateView = {
                 customerIdInput.value = item.dataset.customerId;
                 companySearchInput.value = item.dataset.customerId;
               }
+            };
+
+            // Use mousedown instead of click to fire before blur event
+            userSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => {
+              if (item.dataset.login) {
+                item.addEventListener('mousedown', (e) => {
+                  e.preventDefault(); // prevent input from losing focus before value is set
+                  selectUserItem(item);
                 });
               }
             });
@@ -408,6 +412,17 @@ const TicketCreateView = {
           }
         }, 300);
       });
+      App.setupAutocompleteKeyboardNavigation(userSearchInput, userSuggestionsDiv, (item) => {
+        if (item && item.dataset.login) {
+          userSearchInput.value = item.dataset.name;
+          customerUserIdInput.value = item.dataset.login;
+          userSuggestionsDiv.style.display = 'none';
+          if (item.dataset.customerId) {
+            customerIdInput.value = item.dataset.customerId;
+            companySearchInput.value = item.dataset.customerId;
+          }
+        }
+      });
       userSearchInput.addEventListener('focus', () => {
         if (!customerUserIdInput.value) {
           // Only search if no user is selected yet
@@ -462,6 +477,13 @@ const TicketCreateView = {
           }
         }, 300);
       });
+      App.setupAutocompleteKeyboardNavigation(ownerSearchInput, ownerSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          ownerSearchInput.value = item.dataset.name;
+          ownerIdInput.value = item.dataset.id;
+          ownerSuggestionsDiv.style.display = 'none';
+        }
+      });
       ownerSearchInput.addEventListener('focus', () => {
         ownerSearchInput.value = '';
         ownerIdInput.value = '';
@@ -510,6 +532,13 @@ const TicketCreateView = {
           }
         }, 300);
       });
+      App.setupAutocompleteKeyboardNavigation(responsibleSearchInput, responsibleSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          responsibleSearchInput.value = item.dataset.name;
+          responsibleIdInput.value = item.dataset.id;
+          responsibleSuggestionsDiv.style.display = 'none';
+        }
+      });
       responsibleSearchInput.addEventListener('focus', () => {
         responsibleSearchInput.value = '';
         responsibleIdInput.value = '';
@@ -557,6 +586,13 @@ const TicketCreateView = {
           }
         }, 150);
       });
+      App.setupAutocompleteKeyboardNavigation(queueSearchInput, queueSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          queueSearchInput.value = item.dataset.name;
+          queueIdInput.value = item.dataset.id;
+          queueSuggestionsDiv.style.display = 'none';
+        }
+      });
       queueSearchInput.addEventListener('focus', () => {
         queueSearchInput.value = '';
         queueIdInput.value = '';

public/js/views/ticketDetail.js

@@ -694,6 +694,15 @@ const TicketDetailView = {
         }, 150);
       });
 
+      App.setupAutocompleteKeyboardNavigation(queueSearchInput, queueSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          queueSearchInput.value = item.dataset.name;
+          queueIdInput.value = item.dataset.id;
+          queueSuggestionsDiv.style.display = 'none';
+          queueIdInput.dispatchEvent(new Event('change'));
+        }
+      });
+
       queueSearchInput.addEventListener('focus', () => {
         queueSearchInput.value = '';
         queueIdInput.value = '';

public/js/views/ticketList.js

@@ -735,6 +735,13 @@ const TicketListView = {
           }
         }, 300);
       });
+      App.setupAutocompleteKeyboardNavigation(batchQueueSearchInput, batchQueueSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          batchQueueSearchInput.value = item.dataset.name;
+          if (batchQueueIdInput) batchQueueIdInput.value = item.dataset.id;
+          batchQueueSuggestionsDiv.style.display = 'none';
+        }
+      });
       batchQueueSearchInput.addEventListener('focus', () => {
         batchQueueSearchInput.value = '';
         if (batchQueueIdInput) batchQueueIdInput.value = '';