diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/data-type-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/data-type-workspace-editor.element.ts index 0fdd38475d..f0a8179dd6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/data-type-workspace-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/data-type-workspace-editor.element.ts @@ -23,10 +23,29 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement { this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (workspaceContext) => { this.#workspaceContext = workspaceContext as UmbDataTypeWorkspaceContext; + this.#observeIsNew(); this.#observeName(); }); } + // TODO: invent some general way for all workspaces, with a name?, to put focus on the name when new. + #observeIsNew() { + if (!this.#workspaceContext) return; + this.observe( + this.#workspaceContext.isNew, + (isNew) => { + if (isNew) { + // TODO: Make a general way to put focus on a input in a modal. (also make sure it only happens if its the top-most-modal.) + requestAnimationFrame(() => { + (this.shadowRoot!.querySelector('#nameInput') as HTMLElement).focus(); + }); + } + this.removeControllerByUnique('_observeIsNew'); + }, + '_observeIsNew' + ); + } + #observeName() { if (!this.#workspaceContext) return; this.observe(this.#workspaceContext.name, (dataTypeName) => { @@ -50,7 +69,7 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement { render() { return html` - + `; } @@ -64,7 +83,7 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement { height: 100%; } - #header { + #nameInput { /* TODO: can this be applied from layout slot CSS? */ margin: 0 var(--uui-size-layout-1); flex: 1 1 auto;