From 750e1b1c5b0bead433ed7363b928056fe446b404 Mon Sep 17 00:00:00 2001
From: Scott Pouliot <spouliot@scppowdercoating.com>
Date: Wed, 10 Jun 2026 13:59:14 -0400
Subject: [PATCH] Fix preferred powder search dropdown not appearing

Inline display:none!important on the results div blocked all CSS rules
from showing it, including the :not(:empty) trick. Switched to explicit
JS show/hide so the dropdown is reliably visible after typing 2+ chars.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/PowderCoating.Web/Views/Customers/Details.cshtml |  8 ++------
 src/PowderCoating.Web/wwwroot/js/customer-details.js | 10 +++++++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/PowderCoating.Web/Views/Customers/Details.cshtml b/src/PowderCoating.Web/Views/Customers/Details.cshtml
index d5e5a82..54e3948 100644
--- a/src/PowderCoating.Web/Views/Customers/Details.cshtml
+++ b/src/PowderCoating.Web/Views/Customers/Details.cshtml
@@ -823,9 +823,8 @@
                                        oninput="searchInventoryItems(this.value)"
                                        autocomplete="off" />
                                 <input type="hidden" id="selectedPowderId" />
-                                <div id="powderSearchResults" class="dropdown-menu w-100 show p-0"
-                                     style="display:none!important;position:absolute;z-index:1000;"
-                                     onfocusout=""></div>
+                                <div id="powderSearchResults" class="dropdown-menu w-100 p-0"
+                                     style="display:none;position:absolute;z-index:1000;max-height:200px;overflow-y:auto;"></div>
                             </div>
                             <div class="mb-2">
                                 <input type="text" id="powderNotes" class="form-control form-control-sm"
@@ -839,9 +838,6 @@
                         </div>
                     </div>
                 </div>
-                <style>
-                    #powderSearchResults:not(:empty) { display:block!important; max-height:200px; overflow-y:auto; }
-                </style>
 
                 <!-- Quick Actions -->
                 <div class="card border-0 shadow-sm">
diff --git a/src/PowderCoating.Web/wwwroot/js/customer-details.js b/src/PowderCoating.Web/wwwroot/js/customer-details.js
index 23028f8..3975635 100644
--- a/src/PowderCoating.Web/wwwroot/js/customer-details.js
+++ b/src/PowderCoating.Web/wwwroot/js/customer-details.js
@@ -99,7 +99,10 @@ let _powderSearchTimer = null;
 function searchInventoryItems(term) {
     clearTimeout(_powderSearchTimer);
     const dropdown = document.getElementById('powderSearchResults');
-    if (!term || term.length < 2) { if (dropdown) dropdown.innerHTML = ''; return; }
+    if (!term || term.length < 2) {
+        if (dropdown) { dropdown.innerHTML = ''; dropdown.style.display = 'none'; }
+        return;
+    }
 
     _powderSearchTimer = setTimeout(async () => {
         try {
@@ -109,7 +112,8 @@ function searchInventoryItems(term) {
             dropdown.innerHTML = data.length === 0
                 ? '<div class="dropdown-item text-muted small">No results</div>'
                 : data.map(i => `<button type="button" class="dropdown-item small"
-                    onclick="selectPowder(${i.id}, ${JSON.stringify(i.name + (i.colorName ? ' — ' + i.colorName : ''))})">${i.name}${i.colorName ? ' <span class=\'text-muted\'>' + i.colorName + '</span>' : ''} <span class="badge bg-light text-muted border">${i.sku}</span></button>`).join('');
+                    onclick="selectPowder(${i.id}, ${JSON.stringify(i.name + (i.colorName ? ' — ' + i.colorName : ''))})">${i.name}${i.colorName ? ' <span class=\'text-muted\'>' + i.colorName + '</span>' : ''} <span class="badge bg-light text-muted border">${i.sku ?? ''}</span></button>`).join('');
+            dropdown.style.display = 'block';
         } catch { /* silent */ }
     }, 300);
 }
@@ -118,7 +122,7 @@ function selectPowder(itemId, label) {
     document.getElementById('selectedPowderId').value  = itemId;
     document.getElementById('powderSearchInput').value = label;
     const dropdown = document.getElementById('powderSearchResults');
-    if (dropdown) dropdown.innerHTML = '';
+    if (dropdown) { dropdown.innerHTML = ''; dropdown.style.display = 'none'; }
 }
 
 async function addPreferredPowder(customerId) {