diff --git a/admin-dashboard.html b/admin-dashboard.html index 03b8bbb..380b74b 100644 --- a/admin-dashboard.html +++ b/admin-dashboard.html @@ -2444,6 +2444,8 @@ function initIconPicker() { if (!iconInput || !iconDropdown) return; let isDropdownOpen = false; + let isMouseOverDropdown = false; + let isMouseOverInput = false; // Position dropdown relative to input function positionDropdown() { @@ -2454,8 +2456,12 @@ function initIconPicker() { } // Toggle dropdown - function toggleDropdown() { - isDropdownOpen = !isDropdownOpen; + function toggleDropdown(open) { + if (open !== undefined) { + isDropdownOpen = open; + } else { + isDropdownOpen = !isDropdownOpen; + } iconDropdown.classList.toggle('hidden', !isDropdownOpen); if (isDropdownOpen) { @@ -2470,10 +2476,27 @@ function initIconPicker() { } } + // Handle mouse enter/leave events + iconInput.addEventListener('mouseenter', () => { + isMouseOverInput = true; + }); + + iconInput.addEventListener('mouseleave', () => { + isMouseOverInput = false; + }); + + iconDropdown.addEventListener('mouseenter', () => { + isMouseOverDropdown = true; + }); + + iconDropdown.addEventListener('mouseleave', () => { + isMouseOverDropdown = false; + }); + // Handle click outside function handleClickOutside(e) { - if (isDropdownOpen && !iconDropdown.contains(e.target) && e.target !== iconInput) { - toggleDropdown(); + if (isDropdownOpen && !isMouseOverDropdown && !isMouseOverInput) { + toggleDropdown(false); } } @@ -2481,14 +2504,14 @@ function initIconPicker() { iconInput.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); - toggleDropdown(); + toggleDropdown(true); }); // Close dropdown handlers if (closeButton) { closeButton.addEventListener('click', (e) => { e.stopPropagation(); - toggleDropdown(); + toggleDropdown(false); }); } @@ -2503,7 +2526,7 @@ function initIconPicker() { const iconClass = iconOption.getAttribute('data-icon'); if (iconClass) { selectIcon(iconClass); - toggleDropdown(); // Close dropdown after selection + toggleDropdown(false); } } }); @@ -2527,7 +2550,7 @@ function initIconPicker() { // Close on Escape document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isDropdownOpen) { - toggleDropdown(); + toggleDropdown(false); } }); @@ -2544,6 +2567,36 @@ function initIconPicker() { positionDropdown(); } }); + + // Clean up event listeners when component is removed + const cleanup = () => { + iconInput.removeEventListener('mouseenter', () => { + isMouseOverInput = true; + }); + iconInput.removeEventListener('mouseleave', () => { + isMouseOverInput = false; + }); + iconDropdown.removeEventListener('mouseenter', () => { + isMouseOverDropdown = true; + }); + iconDropdown.removeEventListener('mouseleave', () => { + isMouseOverDropdown = false; + }); + document.removeEventListener('click', handleClickOutside); + window.removeEventListener('scroll', () => { + if (isDropdownOpen) { + positionDropdown(); + } + }); + window.removeEventListener('resize', () => { + if (isDropdownOpen) { + positionDropdown(); + } + }); + }; + + // Add cleanup to window beforeunload + window.addEventListener('beforeunload', cleanup); } // Render icons based on search term