From 3140c90f3837a5b80940e826ba5edc71644fdaf7 Mon Sep 17 00:00:00 2001
From: Markus Johansson <markus@enkelmedia.se>
Date: Sat, 27 Jul 2024 16:43:43 +0200
Subject: [PATCH] #16834 potential fix for um-router-slot

---
 .../modal-routed/dashboard.element.ts         |  2 +-
 .../modal/example-modal.element.ts            | 49 ++++++++++++-------
 .../core/router/router-slot.element.ts        |  4 ++
 3 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts
index b7d8714b7d..add1ec69de 100644
--- a/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts
+++ b/src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts
@@ -51,7 +51,7 @@ export class UmbDashboardElement extends UmbElementMixin(LitElement) {
 				<umb-router-slot
           .routes=${this._routes}
           @init=${(event: UmbRouterSlotInitEvent) => {
-            console.log('modal routes init');
+            console.log('tab routes init');
           }}
           @change=${(event: UmbRouterSlotChangeEvent) => {
             console.log('modal routes change');
diff --git a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts
index 25992faf05..a36ba43bc5 100644
--- a/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/examples/modal-routed/modal/example-modal.element.ts
@@ -11,22 +11,7 @@ export class UmbExampleModal extends UmbModalBaseElement {
 
 	@state()
   private _routes: UmbRoute[] = [
-      {
-          path: `/overview`,
-          component: () => import('./steps/example-modal-step1.element.js'),
-          setup: (component, info) => {
-          },
-      },
-      {
-          path: `/details`,
-          component: () => import('./steps/example-modal-step2.element.js'),
-          setup: (component, info) => {
-          },
-      },
-      {
-        path: '',
-        redirectTo: 'overview',
-      },
+
   ];
 
 	/**
@@ -37,6 +22,36 @@ export class UmbExampleModal extends UmbModalBaseElement {
 		console.log('modal element loaded');
 	}
 
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this._routes = [{
+			path: `/overview`,
+			component: () => import('./steps/example-modal-step1.element.js'),
+			setup: (component, info) => {
+			},
+	},
+	{
+			path: `/details`,
+			component: () => import('./steps/example-modal-step2.element.js'),
+			setup: (component, info) => {
+			},
+	},
+	{
+		path: '',
+		redirectTo: 'overview',
+	},
+	{
+		path: '',
+		redirectTo: 'test',
+	}
+];
+
+	setTimeout(()=>{
+		//this._routes = [this._routes[0],this._routes[1],this._routes[2]]
+	},20);
+
+	}
+
 	override render() {
 		return html`
 			<div>
@@ -45,7 +60,7 @@ export class UmbExampleModal extends UmbModalBaseElement {
 				<umb-router-slot
           .routes=${this._routes}
           @init=${(event: UmbRouterSlotInitEvent) => {
-            console.log('modal routes init');
+            console.log('modal route init fired');
           }}
           @change=${(event: UmbRouterSlotChangeEvent) => {
             console.log('modal routes change');
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/router/router-slot.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/router/router-slot.element.ts
index ae9f336236..2ca1edb543 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/router/router-slot.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/router/router-slot.element.ts
@@ -97,6 +97,10 @@ export class UmbRouterSlotElement extends UmbLitElement {
 		this._routerPath = this._constructAbsoluteRouterPath();
 		this.#routeContext._internal_routerGotBasePath(this._routerPath);
 		this.dispatchEvent(new UmbRouterSlotInitEvent());
+		const newActiveLocalPath = this._constructLocalRouterPath();
+		if (this._activeLocalPath !== newActiveLocalPath) {
+			this.#router.routes = [...this.#router.routes];
+		}
 	}
 
 	protected _updateRouterPath() {