mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-02 10:35:22 +00:00
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:
parent
8fb78d612b
commit
9bb08eed5a
@ -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();
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user