Auto close focus leave

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/entity-action-list.element.ts

@@ -59,6 +59,30 @@
 		};
 	}
 
+
+
+override focus() {
+  const extensionComponent = this.renderRoot.querySelector('umb-extension-with-api-slot');
+  if (!extensionComponent) return;
+
+  // Wait for the slot component to render
+  extensionComponent.updateComplete.then(() => {
+    const firstEntityAction = extensionComponent.shadowRoot?.querySelector('umb-entity-action');
+    if (!firstEntityAction) return;
+
+    firstEntityAction.updateComplete.then(() => {
+      const firstMenuItem = firstEntityAction.shadowRoot?.querySelector('uui-menu-item');
+
+      firstMenuItem?.updateComplete?.then(() => {
+        const labelButton = firstMenuItem.shadowRoot?.querySelector('#label-button') as HTMLElement;
+        labelButton?.focus();
+      });
+    });
+  });
+}
+
+
+
 	#hasRenderedOnce?: boolean;
 	override render() {
 		return this._filter

src/Umbraco.Web.UI.Client/src/packages/core/entity-action/global-components/entity-actions-dropdown/entity-actions-dropdown.element.ts

@@ -1,6 +1,6 @@
 import type { UmbDropdownElement } from '../../../components/dropdown/index.js';
 import { UmbEntityActionListElement } from '../../entity-action-list.element.js';
-import { html, customElement, property, css, query } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, css, query, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UUIScrollContainerElement } from '@umbraco-cms/backoffice/external/uui';
 import { UMB_ENTITY_CONTEXT, type UmbEntityModel } from '@umbraco-cms/backoffice/entity';
@@ -48,8 +48,9 @@
 	}
 
 	#onDropdownOpened() {
-		if (this.#scrollContainerElement) {
-			return; // Already created
+		if (this.#entityActionListElement) {
+       this.#entityActionListElement.focus();
+			return;
 		}
 
 		// First create dropdown content when the dropdown is opened.
@@ -64,11 +65,16 @@
 		this._dropdownElement?.appendChild(this.#scrollContainerElement);
 	}
 
+
 	override render() {
 		return html`<umb-dropdown
 			id="action-modal"
 			@click=${this.#onDropdownClick}
 			@opened=${this.#onDropdownOpened}
+			@focusout=${(e: FocusEvent) =>
+				!['umb-entity-action-list', 'uui-scroll-container'].includes((e.relatedTarget as HTMLElement)?.tagName.toLowerCase() || '')
+					&& this.#onActionExecuted()
+			}
 			.label=${this.label}
 			?compact=${this.compact}
 			hide-expand>

src/Umbraco.Web.UI/appsettings.Development.template.json

@@ -24,7 +24,7 @@
     ]
   },
   "Umbraco": {
-    "CMS": {
+    "CMS":
       "Examine": {
         "LuceneDirectoryFactory": "TempFileSystemDirectoryFactory"
       },