#109 - dismiss on popover prevent link navigation

.gitignore

@@ -7,3 +7,4 @@ build/**
 dist/**
 .next/**
 phpunit-*.phar
+.yarn

.node-version

@@ -0,0 +1 @@
+20.13.1

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

ComboStrap/HistoricalBreadcrumbMenuItem.php

@@ -109,9 +109,10 @@ public function getLinkAttributes($classprefix = 'menuitem '): array
 
         $linkAttributes["data{$dataAttributeNamespace}-content"] = $html;
 
-        // Dismiss on next click
-        // To debug, just comment this line
-        $linkAttributes["data{$dataAttributeNamespace}-trigger"] = "focus";
+        // https://github.com/ComboStrap/combo/issues/109
+        // Don't use the dismiss, happens before a link navigation
+        // preventing links to work
+        // $linkAttributes["data{$dataAttributeNamespace}-trigger"] = "focus";
 
         // See for the tabindex
         // https://getbootstrap.com/docs/5.1/components/popovers/#dismiss-on-next-click

ComboStrap/SlotManagerMenuItem.php

@@ -73,10 +73,10 @@ public function getLinkAttributes($classprefix = 'menuitem '): array
         // encoding happens
         $linkAttributes["data{$dataAttributeNamespace}-content"] = $this->createHtml();
 
-
-        // Dismiss on next click
-        // To debug, just comment this line
-        $linkAttributes["data{$dataAttributeNamespace}-trigger"] = "focus";
+        // https://github.com/ComboStrap/combo/issues/109
+        // Don't use the dismiss, happens before a link navigation
+        // preventing links to work
+        // $linkAttributes["data{$dataAttributeNamespace}-trigger"] = "focus";
 
         // See for the tabindex
         // https://getbootstrap.com/docs/5.1/components/popovers/#dismiss-on-next-click

package.json

@@ -1,9 +1,13 @@
 {
     "name": "combo-test",
     "version": "1.0.0",
-    "description": "Jsdom is used to execute pages in test",
+    "description": "Packages used in the test and type development",
     "private": true,
     "devDependencies": {
-        "jsdom": "^22.0.0"
-    }
+        "@types/bootstrap": "^5.2.10",
+        "bootstrap": "5.1",
+        "jsdom": "^22.0.0",
+        "vitest": "^1.6.0"
+    },
+    "packageManager": "[email protected]"
 }

resources/snippet/js/combo-popover.js

@@ -1,12 +1,11 @@
-/* global bootstrap */
-// noinspection ES6ConvertVarToLetConst
+
 window.combos = (function (module) {
     module.popover = {
         getDataNamespace: function () {
             let defaultNamespace = "-bs";
             let bootstrapVersion = 5;
-            if (typeof bootstrap.Popover.VERSION !== 'undefined') {
-                bootstrapVersion = parseInt(bootstrap.Popover.VERSION.substr(0, 1), 10);
+            if (typeof window.bootstrap.Popover.VERSION !== 'undefined') {
+                bootstrapVersion = parseInt(window.bootstrap.Popover.VERSION.substr(0, 1), 10);
                 if (bootstrapVersion < 5) {
                     return "";
                 }
@@ -33,15 +32,47 @@ window.combos = (function (module) {
                 cssSelector = `[data${namespace}-toggle="popover"]`;
             }
             options.sanitize = false;
-            if (typeof bootstrap.Popover.VERSION !== 'undefined') {
+            if (typeof window.bootstrap.Popover.VERSION !== 'undefined') {
                 document.querySelectorAll(cssSelector)
                     .forEach(el => {
-                        let popover = bootstrap.Popover.getInstance(el);
+                        let popover = window.bootstrap.Popover.getInstance(el);
                         if (popover === null) {
-                            new bootstrap.Popover(el, options);
-                            // to not navigate on `a` anchor
-                            el.onclick = (event => event.preventDefault());
+                            popover = new window.bootstrap.Popover(el, options);
                         }
+                        el.onclick = (event) => {
+                            const popoverOnClick = window.bootstrap.Popover.getInstance(el)
+                            // to not navigate on `a` anchor
+                            event.preventDefault();
+                            // https://stackoverflow.com/a/70498530/297420
+                            const areaListener = new AbortController();
+                            // to dismiss the popover
+                            document.addEventListener(
+                                'mousedown',
+                                event => {
+                                    if (el.contains(event.target)) {
+                                        return;
+                                    }
+                                    const rootPopoverDomId = el.getAttribute("aria-describedby");
+                                    if (!rootPopoverDomId) {
+                                        areaListener.abort();
+                                        return;
+                                    }
+                                    const rootPopOverElement = document.getElementById(rootPopoverDomId);
+                                    if (!rootPopOverElement) {
+                                        areaListener.abort();
+                                        return;
+                                    }
+                                    if (rootPopOverElement.contains(event.target)) {
+                                        return;
+                                    }
+                                    popoverOnClick.hide();
+                                    areaListener.abort();
+                                },
+                                { signal: areaListener.signal }
+                            );
+                        };
+
+
                     });
                 return;
             }