Fix catalog filter leaving items unclickable after filtering

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 <noreply@anthropic.com>
This commit is contained in:
2026-04-29 13:19:41 -04:00
parent 8de9cd04b8
commit ac3e4452b2
@@ -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) {