fix route resolve race condition

Author: nielslyngsoe

src/external/router-slot/router-slot.ts

@@ -45,6 +45,11 @@ ensureAnchorHistory();
  * @event changestate - Dispatched when the router slot state changes.
  */
 export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouterSlot<D, P> {
+	/**
+	 * Method to cancel navigation if changed.
+	 */
+	private _cancelNavigation ?:() => void;
+
 	/**
 	 * Listeners on the router.
 	 */
@@ -200,9 +205,13 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 			// If navigate is not determined, then we will check if we have a route match. If not then we will re-render. [NL]
 			navigate = this._routeMatch === null;
 			if (navigate === false) {
-				const newMatch = this.getRouteMatch();
-				// Check if this match matches the current match (aka. If the path has changed), if so we should navigate. [NL]
-				navigate = this._routeMatch?.route.path !== newMatch?.route.path;
+				if (this.isConnected) {
+					const newMatch = this.getRouteMatch();
+					// Check if this match matches the current match (aka. If the path has changed), if so we should navigate. [NL]
+					if(newMatch) {
+						navigate = shouldNavigate(this.match, newMatch);
+					}
+				}
 			}
 		}
 
@@ -327,10 +336,17 @@ export class RouterSlot<D = any, P = any> extends HTMLElement implements IRouter
 			// Only change route if its a new route.
 			const navigate = shouldNavigate(this.match, match);
 			if (navigate) {
+
+				// If another navigation is still begin resolved in this very moment, then we need to cancel that so it does not end up overriding this new navigation.[NL]
+				this._cancelNavigation?.();
 				// Listen for another push state event. If another push state event happens
 				// while we are about to navigate we have to cancel.
 				let navigationInvalidated = false;
-				const cancelNavigation = () => (navigationInvalidated = true);
+				const cancelNavigation = () => {
+					navigationInvalidated = true;
+					this._cancelNavigation = undefined;
+				};
+				this._cancelNavigation = cancelNavigation;
 				const removeChangeListener: EventListenerSubscription = addListener<Event, GlobalRouterEvent>(
 					GLOBAL_ROUTER_EVENTS_TARGET,
 					'changestate',

src/packages/core/content/workspace/views/edit/content-editor-properties.element.ts

@@ -41,7 +41,6 @@ export class UmbContentWorkspaceViewEditPropertiesElement extends UmbLitElement
 			);
 		});
 		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
-			console.log(this, datasetContext)
 			this.#variantId = datasetContext.getVariantId();
 			this.#generatePropertyDataPath();
 		});

src/packages/core/workspace/components/workspace-editor/workspace-editor.element.ts

@@ -49,8 +49,6 @@ export class UmbWorkspaceEditorElement extends UmbLitElement {
 	constructor() {
 		super();
 
-		console.log("workspace editor created.")
-
 		new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'workspaceView', null, (workspaceViews) => {
 			this._workspaceViews = workspaceViews.map((view) => view.manifest);
 			this._createRoutes();

src/packages/core/workspace/components/workspace-split-view/workspace-split-view.context.ts

@@ -1,9 +1,9 @@
-import { UMB_VARIANT_WORKSPACE_CONTEXT } from '../../contexts/index.js';
-import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbNumberState } from '@umbraco-cms/backoffice/observable-api';
+import { UMB_VARIANT_WORKSPACE_CONTEXT } from '../../contexts/index.js';
+import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
 
 export class UmbWorkspaceSplitViewContext extends UmbContextBase<UmbWorkspaceSplitViewContext> {

src/packages/core/workspace/components/workspace-split-view/workspace-split-view.element.ts

@@ -35,8 +35,6 @@ export class UmbWorkspaceSplitViewElement extends UmbLitElement {
 
 	override render() {
 
-		console.log("workspace split view render")
-
 		return html`
 			<umb-workspace-editor
 				alias=${this.alias}

src/packages/core/workspace/controllers/workspace-split-view-manager.controller.ts

@@ -25,7 +25,6 @@ export class UmbWorkspaceSplitViewManager {
 	}
 
 	setActiveVariant(index: number, culture: string | null, segment: string | null) {
-		console.log("setActiveVariant", index, culture, segment)
 		this.#activeVariantsInfo.appendOneAt({ index, culture: culture ?? null, segment: segment ?? null }, index);
 	}
 

src/packages/documents/documents/workspace/document-workspace-split-view.element.ts

@@ -1,8 +1,8 @@
-import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from './document-workspace.context-token.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, nothing, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import type { ActiveVariant } from '@umbraco-cms/backoffice/workspace';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from './document-workspace.context-token.js';
 
 @customElement('umb-document-workspace-split-view')
 export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
@@ -28,27 +28,11 @@ export class UmbDocumentWorkspaceSplitViewElement extends UmbLitElement {
 			this._workspaceContext.splitView.activeVariantsInfo,
 			(variants) => {
 				this._variants = variants;
-				console.log("______variants: ", variants[0])
 			},
 			'_observeActiveVariantsInfo',
 		);
 	}
 
-	override connectedCallback(): void {
-		super.connectedCallback();
-		console.log("connected callback------")
-	}
-
-	override disconnectedCallback(): void {
-		super.disconnectedCallback();
-		console.log("DISconnected callback------")
-	}
-
-	override destroy(): void {
-		super.destroy();
-		console.log("split view ot destroyed")
-	}
-
 	override render() {
 		return this._variants
 			? html`<div id="splitViews">