diff --git a/src/Umbraco.Web.UI.Client/libs/observable-api/observer.controller.ts b/src/Umbraco.Web.UI.Client/libs/observable-api/observer.controller.ts
index 38f51421cc..cc223e1d48 100644
--- a/src/Umbraco.Web.UI.Client/libs/observable-api/observer.controller.ts
+++ b/src/Umbraco.Web.UI.Client/libs/observable-api/observer.controller.ts
@@ -22,8 +22,4 @@ export class UmbObserverController<T = unknown> extends UmbObserver<T> implement
 
 		host.addController(this);
 	}
-
-	hostConnected() {
-		return;
-	}
 }
diff --git a/src/Umbraco.Web.UI.Client/libs/observable-api/observer.ts b/src/Umbraco.Web.UI.Client/libs/observable-api/observer.ts
index dc0b7993c0..20eb7a0a34 100644
--- a/src/Umbraco.Web.UI.Client/libs/observable-api/observer.ts
+++ b/src/Umbraco.Web.UI.Client/libs/observable-api/observer.ts
@@ -1,15 +1,20 @@
 import { Observable, Subscription } from 'rxjs';
 
 export class UmbObserver<T> {
+	#source!: Observable<T>;
+	#callback!: (_value: T) => void;
 	#subscription!: Subscription;
 
 	constructor(source: Observable<T>, callback: (_value: T) => void) {
-		this.#subscription = source.subscribe((value) => {
-			callback(value);
-		});
+		this.#source = source;
+		this.#subscription = source.subscribe(callback);
 	}
 
-	// Notice controller class implements empty hostConnected().
+	hostConnected() {
+		if (this.#subscription.closed) {
+			this.#subscription = this.#source.subscribe(this.#callback);
+		}
+	}
 
 	hostDisconnected() {
 		// No cause then it cant re-connect, if the same element just was moved in DOM.