tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

FIX: Firefox dropdown outside clicks

Browse Source
This commit is contained in:
Tony Air 2022-03-18 14:09:51 +02:00
parent 389ea21b36
commit 184ec579ba
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/js/ui/dropdown.js
View File

@ -36,6 +36,9 @@ const DropdownHoverUI = ((window) => {
const init = () => { const init = () => {
console.log(`${NAME}: init`); console.log(`${NAME}: init`);
const clickableEls = document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`);
const hoverableEls = document.querySelectorAll(`[data-bs-toggle="hover"]`);
const attachHoverEvents = (el) => { const attachHoverEvents = (el) => {
el.addEventListener('mouseover', Show, false); el.addEventListener('mouseover', Show, false);
el.addEventListener('mouseout', Hide, false); el.addEventListener('mouseout', Hide, false);
@ -55,10 +58,24 @@ const DropdownHoverUI = ((window) => {
el.classList.add(`${NAME}-active`); el.classList.add(`${NAME}-active`);
}; };
// Hide all for not dropdown-menu clicks // Hide all for outside clicks
/*document.addEventListener('click', function (event) {
const isClickInside = clickableEls.contains(event.target);
if (!isClickInside) {
HideAll();
}
});*/
document.addEventListener('click', (event) => { document.addEventListener('click', (event) => {
let breakPath = false; let breakPath = false;
event.path.forEach((el, i) => { const path = event.path || (event.composedPath && event.composedPath());
if (!path) {
console.warn('Browser does not provide event path to hide dropdowns on outside click');
}
path.forEach((el, i) => {
if (breakPath) { if (breakPath) {
return; return;
} }
@ -74,12 +91,12 @@ const DropdownHoverUI = ((window) => {
}); });
}); });
document.querySelectorAll(`[data-bs-toggle="hover"]`).forEach((el, i) => { hoverableEls.forEach((el, i) => {
const parent = el.closest('.dropdown'); const parent = el.closest('.dropdown');
attachHoverEvents(parent); attachHoverEvents(parent);
}); });
document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`).forEach((el, i) => { clickableEls.forEach((el, i) => {
attachClickEvents(el); attachClickEvents(el);
}); });
}; };