diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
index eccd95f917..630a403874 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
@@ -64,12 +64,27 @@ export class UmbSearchModalElement extends UmbLitElement {
 		super.connectedCallback();
 
 		this.addEventListener('keydown', this.#onKeydown);
+		document.addEventListener('click', this.#onDocumentClick); //TODO: Temp solution to close the modal on outside click. We need to look into a generic solution for this.
 
 		requestAnimationFrame(() => {
 			this.#focusInput();
 		});
 	}
 
+	disconnectedCallback(): void {
+		super.disconnectedCallback();
+
+		this.removeEventListener('keydown', this.#onKeydown);
+		document.removeEventListener('click', this.#onDocumentClick);
+	}
+
+	#onDocumentClick = (event: MouseEvent) => {
+		const path = event.composedPath();
+		if (path.includes(this)) return;
+
+		this.modalContext?.reject();
+	};
+
 	#observeProviders() {
 		new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'searchProvider', null, async (providers) => {
 			const searchProviders: Array<SearchProvider> = [];