From ac3e4452b230e2f774269790d23ba24e03f04d08 Mon Sep 17 00:00:00 2001 From: Scott Pouliot Date: Wed, 29 Apr 2026 13:19:41 -0400 Subject: [PATCH] Fix catalog filter leaving items unclickable after filtering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Multi-word search now uses Array.every so word order doesn't matter. Scroll is reset to top after each filter so visible items aren't hidden off-screen. A forced layout reflow (offsetHeight read) ensures iOS Safari re-registers filtered-in elements as interactive — without it, items that transition from display:none back to visible remain unresponsive to taps. Co-Authored-By: Claude Sonnet 4.6 --- src/PowderCoating.Web/wwwroot/js/item-wizard.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/PowderCoating.Web/wwwroot/js/item-wizard.js b/src/PowderCoating.Web/wwwroot/js/item-wizard.js index 6bdb869..75ae77f 100644 --- a/src/PowderCoating.Web/wwwroot/js/item-wizard.js +++ b/src/PowderCoating.Web/wwwroot/js/item-wizard.js @@ -394,10 +394,21 @@ function renderProductFields() { } function filterCatalog() { - const q = document.getElementById('catalogSearch').value.toLowerCase(); - document.querySelectorAll('#catalogListbox .catalog-list-item').forEach(el => { - el.style.display = (q && !el.textContent.toLowerCase().includes(q)) ? 'none' : ''; + const q = document.getElementById('catalogSearch').value.toLowerCase(); + const words = q.split(/\s+/).filter(Boolean); + const listbox = document.getElementById('catalogListbox'); + if (!listbox) return; + listbox.querySelectorAll('.catalog-list-item').forEach(el => { + const text = el.textContent.toLowerCase(); + const hide = words.length > 0 && !words.every(w => text.includes(w)); + el.style.display = hide ? 'none' : ''; }); + // Reset scroll so filtered-in items are always visible at the top. + listbox.scrollTop = 0; + // Force a layout recalculation — required on iOS Safari so elements that + // transition from display:none back to visible register as interactive. + // eslint-disable-next-line no-unused-expressions + listbox.offsetHeight; } function pickCatalogItem(el) {