From 9bb08eed5adb7db19f3f477aafec492addbbc7a7 Mon Sep 17 00:00:00 2001 From: Ludy Date: Wed, 30 Jul 2025 23:38:43 +0200 Subject: [PATCH] fix(search): add null-check in dropdown hide handler (#3983) # Description of Changes - **What was changed** - Added a null-check on `dropdownMenu` in the document click handler to prevent errors when the menu element is not present. - **Why the change was made** - To guard against potential runtime errors if `dropdownMenu` is `null`. ```js search.js:126 Uncaught TypeError: Cannot read properties of null (reading 'classList') at HTMLDocument. (search.js:126:60) (anonymous) @ search.js:126 ``` --- ## Checklist ### General - [x] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [x] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [x] I have performed a self-review of my own code - [x] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../src/main/resources/static/js/search.js | 93 ++++++++++--------- 1 file changed, 50 insertions(+), 43 deletions(-) diff --git a/app/core/src/main/resources/static/js/search.js b/app/core/src/main/resources/static/js/search.js index 277d722a9..0b8877e62 100644 --- a/app/core/src/main/resources/static/js/search.js +++ b/app/core/src/main/resources/static/js/search.js @@ -82,55 +82,62 @@ document.querySelector("#navbarSearchInput").addEventListener("input", function resultsBox.style.width = window.navItemMaxWidth + "px"; }); +document.addEventListener('DOMContentLoaded', function () { + const searchDropdown = document.getElementById('searchDropdown'); + const searchInput = document.getElementById('navbarSearchInput'); -const searchDropdown = document.getElementById('searchDropdown'); -const searchInput = document.getElementById('navbarSearchInput'); + // Check if elements are missing and skip initialization if necessary + if (!searchDropdown || !searchInput) { + console.warn('Search dropdown or input not found. Skipping initialization.'); + return; + } + const dropdownMenu = searchDropdown.querySelector('.dropdown-menu'); + if (!dropdownMenu) { + console.warn('Dropdown menu not found within the search dropdown. Skipping initialization.'); + return; + } -// Check if elements exist before proceeding -if (searchDropdown && searchInput) { - const dropdownMenu = searchDropdown.querySelector('.dropdown-menu'); + // Create a single dropdown instance + const dropdownInstance = new bootstrap.Dropdown(searchDropdown); - // Create a single dropdown instance - const dropdownInstance = new bootstrap.Dropdown(searchDropdown); - -// Handle click for mobile - searchDropdown.addEventListener('click', function (e) { - e.preventDefault(); - const isOpen = dropdownMenu.classList.contains('show'); - // Close all other open dropdowns - document.querySelectorAll('.navbar-nav .dropdown-menu.show').forEach((menu) => { - if (menu !== dropdownMenu) { - const parentDropdown = menu.closest('.dropdown'); - if (parentDropdown) { - const parentToggle = parentDropdown.querySelector('[data-bs-toggle="dropdown"]'); - if (parentToggle) { - let instance = bootstrap.Dropdown.getInstance(parentToggle); - if (!instance) { - instance = new bootstrap.Dropdown(parentToggle); - } - instance.hide(); - } - } + // Handle click for mobile + searchDropdown.addEventListener('click', function (e) { + e.preventDefault(); + const isOpen = dropdownMenu.classList.contains('show'); + // Close all other open dropdowns + document.querySelectorAll('.navbar-nav .dropdown-menu.show').forEach((menu) => { + if (menu !== dropdownMenu) { + const parentDropdown = menu.closest('.dropdown'); + if (parentDropdown) { + const parentToggle = parentDropdown.querySelector('[data-bs-toggle="dropdown"]'); + if (parentToggle) { + let instance = bootstrap.Dropdown.getInstance(parentToggle); + if (!instance) { + instance = new bootstrap.Dropdown(parentToggle); } - }); - if (!isOpen) { - dropdownInstance.show(); - setTimeout(() => searchInput.focus(), 150); - } else { - dropdownInstance.hide(); + instance.hide(); + } } + } }); + if (!isOpen) { + dropdownInstance.show(); + setTimeout(() => searchInput.focus(), 150); + } else { + dropdownInstance.hide(); + } + }); - // Hide dropdown if it's open and user clicks outside - document.addEventListener('click', function(e) { - if (!searchDropdown.contains(e.target) && dropdownMenu.classList.contains('show')) { - dropdownInstance.hide(); - } - }); + // Hide dropdown if it's open and user clicks outside + document.addEventListener('click', function (e) { + if (!searchDropdown.contains(e.target) && dropdownMenu.classList.contains('show')) { + dropdownInstance.hide(); + } + }); - // Keep dropdown open if search input is clicked - searchInput.addEventListener('click', function (e) { - e.stopPropagation(); - }); + // Keep dropdown open if search input is clicked + searchInput.addEventListener('click', function (e) { + e.stopPropagation(); + }); -} +});