fix: anchor detection if the link also contains a path fails. Closes #9

package.json

@@ -51,18 +51,18 @@
 	],
 	"license": "MIT",
 	"devDependencies": {
-		"@wessberg/rollup-plugin-ts": "1.1.63",
+		"@wessberg/rollup-plugin-ts": "1.1.64",
 		"@wessberg/scaffold": "1.0.19",
 		"@wessberg/ts-config": "^0.0.41",
-		"rollup": "^1.19.4",
+		"rollup": "^1.21.2",
 		"rollup-plugin-node-resolve": "^5.2.0",
 		"tslib": "^1.10.0",
-		"tslint": "^5.18.0",
-		"typescript": "^3.5.3",
+		"tslint": "^5.19.0",
+		"typescript": "^3.6.2",
 		"standard-changelog": "^2.0.13",
 		"prettier": "^1.18.2",
 		"pretty-quick": "^1.11.1",
-		"husky": "^3.0.3",
+		"husky": "^3.0.5",
 		"np": "^5.0.3"
 	},
 	"dependencies": {},

src/patch/anchor/catch-navigation.ts

@@ -1,5 +1,6 @@
 import {findNearestAncestorsWithScrollBehavior} from "../../util/find-nearest-ancestor-with-scroll-behavior";
 import {findNearestRoot} from "../../util/find-nearest-root";
+import {getLocationOrigin} from "../../util/get-location-origin";
 
 /**
  * A Regular expression that matches id's of the form "#[digit]"
@@ -16,18 +17,21 @@ export function catchNavigation(): void {
 	window.addEventListener("click", e => {
 		// Only work with trusted events on HTMLAnchorElements
 		if (!e.isTrusted || !(e.target instanceof HTMLAnchorElement)) return;
-		const hrefAttributeValue = e.target.getAttribute("href");
 
-		// Only work with HTMLAnchorElements that navigates to a specific ID
-		if (hrefAttributeValue == null || !hrefAttributeValue.startsWith("#")) {
+		const {pathname, search, hash} = e.target;
+		const pointsToCurrentPage =
+			getLocationOrigin(e.target) === getLocationOrigin(location) && pathname === location.pathname && search === location.search;
+
+		// Only work with HTMLAnchorElements that navigates to a specific ID on the current page
+		if (!pointsToCurrentPage || hash == null || hash.length < 1) {
 			return;
 		}
 
 		// Find the nearest root, whether it be a ShadowRoot or the document itself
 		const root = findNearestRoot(e.target);
 
 		// Attempt to match the selector from that root. querySelector' doesn't support IDs that start with a digit, so work around that limitation
-		const elementMatch = hrefAttributeValue.match(ID_WITH_LEADING_DIGIT_REGEXP) != null ? root.getElementById(hrefAttributeValue.slice(1)) : root.querySelector(hrefAttributeValue);
+		const elementMatch = hash.match(ID_WITH_LEADING_DIGIT_REGEXP) != null ? root.getElementById(hash.slice(1)) : root.querySelector(hash);
 
 		// If no selector could be found, don't proceed
 		if (elementMatch == null) return;

src/util/get-location-origin.ts

@@ -0,0 +1,11 @@
+/**
+ * Gets the origin of the given Location or HTMLAnchorElement if available in the runtime, and otherwise shims it. (it's a one-liner)
+ * @returns {string}
+ */
+export function getLocationOrigin(locationLike: Location | HTMLAnchorElement = location): string {
+	if ("origin" in locationLike && locationLike.origin != null) {
+		return locationLike.origin;
+	}
+
+	return `${locationLike.protocol}//${locationLike.hostname}${locationLike.port ? ":" + locationLike.port : ""}`;
+}