ensure container names

src/Umbraco.Web.UI.Client/src/packages/core/content-type/structure/content-type-structure-manager.class.ts

@@ -278,6 +278,22 @@ export class UmbContentTypeStructureManager<
 		return clonedContainer;
 	}
 
+	ensureContainerNames(
+		contentTypeUnique: string | null,
+		type: UmbPropertyContainerTypes,
+		parentId: string | null = null,
+	) {
+		contentTypeUnique = contentTypeUnique ?? this.#ownerContentTypeUnique!;
+		this.getOwnerContainers(type, parentId)?.forEach((container) => {
+			if (container.name === '') {
+				const newName = 'unnamed';
+				this.updateContainer(null, container.id, {
+					name: this.makeContainerNameUniqueForOwnerContentType(container.id, newName, type, parentId) ?? newName,
+				});
+			}
+		});
+	}
+
 	async createContainer(
 		contentTypeUnique: string | null,
 		parentId: string | null = null,
@@ -295,15 +311,8 @@ export class UmbContentTypeStructureManager<
 			sortOrder: sortOrder ?? 0,
 		};
 
-		this.getOwnerContainers(type, parentId)?.forEach((container) => {
-			if (container.name === '') {
-				const newName = 'unnamed';
-				this.updateContainer(contentTypeUnique, container.id, {
-					name: this.makeContainerNameUniqueForOwnerContentType(container.id, newName, type, parentId) ?? newName,
-				});
-			}
-		});
-
+		// Ensure
+		this.ensureContainerNames(contentTypeUnique, type, parentId);
 
 		const contentTypes = this.#contentTypes.getValue();
 		const containers = [...(contentTypes.find((x) => x.unique === contentTypeUnique)?.containers ?? [])];

src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts

@@ -100,6 +100,20 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
 		(e.target as HTMLInputElement).value = newName;
 	}
 
+	#blurGroup(e: InputEvent) {
+		if (!this.groupStructureHelper || !this._group) return;
+		const newName = (e.target as HTMLInputElement).value;
+		if (newName === '') {
+			const changedName = this.groupStructureHelper
+				.getStructureManager()!
+				.makeContainerNameUniqueForOwnerContentType(this._group.id, newName, 'Group', this._group.parent?.id ?? null);
+			if (changedName) {
+				this._singleValueUpdate('name', changedName);
+				(e.target as HTMLInputElement).value = changedName;
+			}
+		}
+	}
+
 	render() {
 		return this._inherited !== undefined && this._groupId
 			? html`
@@ -119,9 +133,10 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
 				<uui-input
 					label=${this.localize.term('contentTypeEditor_group')}
 					placeholder=${this.localize.term('placeholders_entername')}
-					.value=${this._group.name}
+					.value=${this._group!.name}
 					?disabled=${!this._hasOwnerContainer}
-					@change=${this.#renameGroup}></uui-input>
+					@change=${this.#renameGroup}
+					@blur=${this.#blurGroup}></uui-input>
 			</div>
 			${this.sortModeActive
 				? html` <uui-input

src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor.element.ts

@@ -309,7 +309,24 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 		});
 	}
 
-	async #tabNameBlur() {
+	async #tabNameBlur(event: InputEvent) {
+		if (!this._activeTabId) return;
+		const newName = (event.target as HTMLInputElement).value;
+
+		const changedName = this.#workspaceContext?.structure.makeContainerNameUniqueForOwnerContentType(
+			this._activeTabId,
+			newName,
+			'Tab',
+		);
+
+		if (changedName !== null && changedName !== undefined) {
+			(event.target as HTMLInputElement).value = changedName;
+
+			this.#tabsStructureHelper.partialUpdateContainer(tab.id!, {
+				name: changedName,
+			});
+		}
+
 		this._activeTabId = undefined;
 	}