Merge pull request #1967 from umbraco/v14/bugfix/focus-folder-name-input

Bugfix: Focus folder name input
umbraco · May 31, 2024 · 0e2da4c · 0e2da4c
2 parents e31c229 + fd8d14e
commit 0e2da4c
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/src/packages/core/tree/folder/modal/folder-modal-element-base.ts b/src/packages/core/tree/folder/modal/folder-modal-element-base.ts
@@ -4,6 +4,7 @@ import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import type { UmbFolderModel, UmbFolderRepository } from '@umbraco-cms/backoffice/tree';
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { umbFocus } from '@umbraco-cms/backoffice/lit-element';
 
 export abstract class UmbFolderModalElementBase<
 	FolderModalDataType extends { folderRepositoryAlias: string },
@@ -56,34 +57,40 @@ export abstract class UmbFolderModalElementBase<
 
 	render() {
 		return html`
-			<umb-body-layout headline=${this._isNew ? 'Create Folder' : 'Update Folder'}>
+			<umb-body-layout headline=${this.localize.term(this._isNew ? 'actions_folderCreate' : 'actions_folderRename')}>
 				<uui-box>
 					<uui-form>
 						<form id="FolderForm" @submit="${this.#onSubmit}">
 							<uui-form-layout-item>
-								<uui-label id="nameLabel" for="name" slot="label" required>Folder name</uui-label>
+								<uui-label id="nameLabel" for="name" slot="label" required>
+									<umb-localize key="create_enterFolderName">Enter folder name</umb-localize>
+								</uui-label>
 								<uui-input
 									type="text"
 									id="name"
 									name="name"
-									placeholder="Enter folder name..."
+									.label=${this.localize.term('create_enterFolderName')}
 									.value="${this.value?.folder?.name || ''}"
 									required
-									required-message="Folder name is required"></uui-input>
+									${umbFocus()}></uui-input>
 							</uui-form-layout-item>
 						</form>
 					</uui-form>
 				</uui-box>
 
-				<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._rejectModal}"></uui-button>
+				<uui-button
+					slot="actions"
+					id="cancel"
+					label=${this.localize.term('buttons_confirmActionCancel')}
+					@click="${this._rejectModal}"></uui-button>
 				<uui-button
 					form="FolderForm"
 					type="submit"
 					slot="actions"
 					id="confirm"
 					color="positive"
 					look="primary"
-					label=${this._isNew ? 'Create Folder' : 'Update Folder'}></uui-button>
+					label=${this.localize.term(this._isNew ? 'actions_folderCreate' : 'actions_folderRename')}></uui-button>
 			</umb-body-layout>
 		`;
 	}