diff --git a/src/pat/navigation/navigation.js b/src/pat/navigation/navigation.js
index 3d4d1ce91..e768f7936 100644
--- a/src/pat/navigation/navigation.js
+++ b/src/pat/navigation/navigation.js
@@ -45,11 +45,15 @@ export default Base.extend({
this.$el.on("patterns-inject-triggered", "a", (ev) => {
// Remove all set current classes
this.clear_items();
-
// Mark the current item
this.mark_current(ev.target);
});
+ // Mark the navigation items after pat-inject injected into this navigation menu.
+ this.$el.on("patterns-injected-scanned", () => {
+ this.init_markings();
+ });
+
// Automatically and recursively load the ``.current`` item.
if (this.el.classList.contains("navigation-load-current")) {
// Check for current elements injected here.
diff --git a/src/pat/navigation/navigation.test.js b/src/pat/navigation/navigation.test.js
index 9022d0f6b..e7c031e79 100644
--- a/src/pat/navigation/navigation.test.js
+++ b/src/pat/navigation/navigation.test.js
@@ -3,7 +3,7 @@ import Pattern from "./navigation";
import Registry from "../../core/registry";
import utils from "../../core/utils";
-describe("Navigation pattern tests", function () {
+describe("1 - Navigation pattern tests", function () {
beforeEach(function () {
document.body.innerHTML = `
@@ -152,7 +152,80 @@ describe("Navigation pattern tests", function () {
});
});
-describe("Navigation pattern tests - Mark items based on URL", () => {
+describe("2 - Navigation pattern tests - mark after navigation injection", function () {
+ let _window_location;
+
+ beforeEach(() => {
+ _window_location = global.window.location;
+ delete global.window.location;
+ document.body.innerHTML = "";
+ });
+
+ afterEach(() => {
+ global.window.location = _window_location;
+ document.body.innerHTML = "";
+ });
+
+ const set_url = (url, portal_url) => {
+ global.window.location = {
+ href: url,
+ };
+
+ portal_url = portal_url || url;
+
+ document.body.dataset.portalUrl = portal_url;
+ };
+
+ it("navigation roundtrip", async () => {
+ document.body.innerHTML = `
+
+
load navigation
+
+ `;
+
+ set_url("https://patternslib.com/path/to/test");
+
+ Registry.scan(document.body);
+
+ const nav = document.querySelector("nav");
+ const load_nav = document.querySelector(".load-nav");
+ load_nav.click();
+
+ await utils.timeout(1); // wait for MutationObserver
+
+ const w1 = nav.querySelector(".w1");
+ const a1 = nav.querySelector(".a1");
+ const w11 = nav.querySelector(".w11");
+ const a11 = nav.querySelector(".a11");
+
+ console.log(document.body.innerHTML);
+
+ expect(w1.classList.contains("current")).toBeFalsy();
+ expect(w1.classList.contains("navigation-in-path")).toBeTruthy();
+ expect(a1.classList.contains("current")).toBeFalsy();
+ expect(a1.classList.contains("navigation-in-path")).toBeTruthy();
+ expect(w11.classList.contains("current")).toBeTruthy();
+ expect(w11.classList.contains("navigation-in-path")).toBeFalsy();
+ expect(a11.classList.contains("current")).toBeTruthy();
+ expect(a11.classList.contains("navigation-in-path")).toBeFalsy();
+ });
+});
+
+describe("3 - Navigation pattern tests - Mark items based on URL", () => {
let _window_location;
beforeEach(() => {
@@ -304,7 +377,7 @@ describe("Navigation pattern tests - Mark items based on URL", () => {
});
});
-describe("Navigation pattern tests - Mark items based based clicking without pat-inject.", () => {
+describe("4 - Navigation pattern tests - Mark items based based clicking without pat-inject.", () => {
beforeEach(() => {
document.body.innerHTML = "";
});