Fix: Corrected progress bar issue for mail/tel links and ignored othe…

…r targets (#25)
ndungtse · Feb 22, 2024 · d7d5683 · d7d5683
1 parent ed57498
commit d7d5683
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next13-progressbar",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A ProgressBar for next.js >=13 with app directory ",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/AppProgressBar.tsx b/src/AppProgressBar.tsx
@@ -112,8 +112,9 @@ export const Next13ProgressBar = React.memo(
       const handleAnchorClick = (event: MouseEvent) => {
         const anchorElement = event.currentTarget as HTMLAnchorElement;
 
-        // Skip anchors with target="_blank"
-        if (anchorElement.target === '_blank') return;
+        // Skip anchors with target="_blank" | "_top" | "_parent" | "_self"
+        if (anchorElement.target === '_blank' || anchorElement.target === '_top' || anchorElement.target === '_parent')
+          return;
 
         // Skip anchors with download attribute
         if (anchorElement.hasAttribute('download')) return;
@@ -138,8 +139,10 @@ export const Next13ProgressBar = React.memo(
 
       const handleMutation: MutationCallback = () => {
         const anchorElements = document.querySelectorAll('a');
-        // Skip anchors with target="_blank" and anchors without href
-        const validAnchorELes = Array.from(anchorElements).filter((anchor) => anchor.href);
+        const validAnchorELes = Array.from(anchorElements).filter((anchor) => {
+          if (anchor.href.startsWith('tel:+') || anchor.href.startsWith('mailto:')) return false;
+          return anchor.href && anchor.target !== '_blank';
+        });
         validAnchorELes.forEach((anchor) => anchor.addEventListener('click', handleAnchorClick));
       };