diff --git a/admin-dashboard.html b/admin-dashboard.html index aabe6a0..dba19aa 100644 --- a/admin-dashboard.html +++ b/admin-dashboard.html @@ -2445,7 +2445,9 @@ function initIconPicker() { let isModalOpen = false; - // Simple show/hide functions + + + // Improved modal toggle with cleanup const toggleModal = () => { isModalOpen = !isModalOpen; document.body.style.overflow = isModalOpen ? 'hidden' : ''; @@ -2455,68 +2457,69 @@ function initIconPicker() { // Focus search input only after modal is visible requestAnimationFrame(() => { if (iconSearch) { + iconSearch.value = ''; + renderIcons(''); iconSearch.focus(); } }); + } else { + // Reset search when closing + if (iconSearch) { + iconSearch.value = ''; + renderIcons(''); + } } }; - + // Toggle modal on icon input click iconInput.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); toggleModal(); }); - + // Close modal handlers if (closeButton) { - closeButton.addEventListener('click', () => { - isModalOpen = false; - document.body.style.overflow = ''; - iconPickerModal.style.display = 'none'; - }); + closeButton.addEventListener('click', toggleModal); } - + // Close when clicking outside the modal content iconPickerModal.addEventListener('click', (e) => { - if (e.target === iconPickerModal) { - isModalOpen = false; - document.body.style.overflow = ''; - iconPickerModal.style.display = 'none'; + if (e.target === iconPickerModal && isModalOpen) { + toggleModal(); } }); - + // Handle icon selection if (iconList) { iconList.addEventListener('click', (e) => { const iconOption = e.target.closest('.icon-option'); - if (iconOption) { + if (iconOption && isModalOpen) { const iconClass = iconOption.getAttribute('data-icon'); selectIcon(iconClass); + toggleModal(); // Close modal after selection } }); } - - // Handle search + + // Handle search with improved debounce if (iconSearch) { + let searchTimeout; iconSearch.addEventListener('input', () => { - // Debounce search to prevent excessive re-renders - clearTimeout(iconSearch.dataset.searchTimeout); - iconSearch.dataset.searchTimeout = setTimeout(() => { + if (searchTimeout) clearTimeout(searchTimeout); + searchTimeout = setTimeout(() => { renderIcons(iconSearch.value.toLowerCase()); }, 200); }); } - + // Initial render renderIcons(''); - + // Close on Escape document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isModalOpen) { - isModalOpen = false; - document.body.style.overflow = ''; - iconPickerModal.style.display = 'none'; + toggleModal(); } }); }