close modal for create options with links (#17988)

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts

@@ -1,3 +1,4 @@
+import { UmbRefItemElement } from '@umbraco-cms/backoffice/components';
 import type {
 	UmbEntityCreateOptionActionListModalData,
 	UmbEntityCreateOptionActionListModalValue,
@@ -60,20 +61,33 @@ export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseEle
 		);
 	}
 
-	async #onClick(event: Event, controller: UmbExtensionApiInitializer<ManifestType>, href?: string) {
+	async #onOpen(event: Event, controller: UmbExtensionApiInitializer<ManifestType>) {
 		event.stopPropagation();
 
-		// skip if href is defined
-		if (href) {
-			return;
+		if (!controller.api) {
+			throw new Error('No API found');
 		}
 
-		if (!controller.api) throw new Error('No API found');
 		await controller.api.execute();
 
 		this._submitModal();
 	}
 
+	async #onNavigate(event: Event, href: string | undefined) {
+		const refItemElement = event.composedPath().find((x) => x instanceof UmbRefItemElement) as UmbRefItemElement;
+
+		// ignore click events if they are not on a ref item
+		if (!refItemElement) {
+			return;
+		}
+
+		if (!href) {
+			throw new Error('No href found');
+		}
+
+		this._submitModal();
+	}
+
 	#getTarget(href?: string) {
 		if (href && href.startsWith('http')) {
 			return '_blank';
@@ -121,7 +135,8 @@ export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseEle
 				icon=${manifest.meta.icon}
 				href=${ifDefined(href)}
 				target=${this.#getTarget(href)}
-				@open=${(event: Event) => this.#onClick(event, controller, href)}>
+				@open=${(event: Event) => this.#onOpen(event, controller)}
+				@click=${(event: Event) => this.#onNavigate(event, href)}>
 			</umb-ref-item>
 		`;
 	}