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.<anonymous> (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>
This commit is contained in:
Ludy 2025-07-30 23:38:43 +02:00 committed by GitHub
parent 8fb78d612b
commit 9bb08eed5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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();
});
}
});