fix(editor): Focus editable text input when clicking anywhere on the element (#17780)

cypress/e2e/2-credentials.cy.ts

@@ -193,7 +193,6 @@ describe('Credentials', () => {
 		credentialsModal.actions.fillCredentialsForm();
 		workflowPage.getters.nodeCredentialsEditButton().click();
 		credentialsModal.getters.credentialsEditModal().should('be.visible');
-		credentialsModal.getters.name().click();
 		credentialsModal.actions.renameCredential(NEW_CREDENTIAL_NAME);
 		saveCredential();
 		credentialsModal.getters.closeButton().click();
@@ -211,7 +210,6 @@ describe('Credentials', () => {
 		cy.get('body').type('{enter}');
 		workflowPage.getters.nodeCredentialsEditButton().click();
 		credentialsModal.getters.credentialsEditModal().should('be.visible');
-		credentialsModal.getters.name().click();
 		credentialsModal.actions.renameCredential(NEW_CREDENTIAL_NAME2);
 		saveCredential();
 		credentialsModal.getters.closeButton().click();
@@ -236,7 +234,6 @@ describe('Credentials', () => {
 		credentialsModal.actions.fillCredentialsForm();
 		workflowPage.getters.nodeCredentialsEditButton().click();
 		credentialsModal.getters.credentialsEditModal().should('be.visible');
-		credentialsModal.getters.name().click();
 		credentialsModal.actions.renameCredential(NEW_CREDENTIAL_NAME);
 		saveCredential();
 		credentialsModal.getters.closeButton().click();

packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts

@@ -15,7 +15,7 @@ const Template: StoryFn = (args, { argTypes }) => ({
 	},
 	template: `
 		<div class="story">
-			<N8nInlineTextEdit v-bind="args" />
+			<InlineTextEdit v-bind="args" />
 		</div>
 	`,
 });

packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.test.ts

@@ -105,4 +105,24 @@ describe('N8nInlineTextEdit', () => {
 		const emittedEvents = wrapper.emitted('update:model-value');
 		expect(emittedEvents).toBeUndefined();
 	});
+
+	it('should focus input when any child element is clicked', async () => {
+		const wrapper = renderComponent({
+			props: {
+				modelValue: 'Test Value',
+			},
+		});
+		const editableArea = wrapper.getByTestId('inline-editable-area');
+		const rect = editableArea.getBoundingClientRect();
+
+		// Click the bottom right corner of the parent element
+		await userEvent.pointer([
+			{ coords: { clientX: rect.right - 1, clientY: rect.bottom - 1 } },
+			{ target: editableArea },
+			{ keys: '[MouseLeft]' },
+		]);
+
+		const input = wrapper.getByTestId('inline-edit-input');
+		expect(input).toHaveFocus();
+	});
 });

packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue

@@ -52,7 +52,7 @@ const computedInlineStyles = computed(() => ({
 }));
 
 function forceFocus() {
-	if (editableRoot.value && !props.readOnly) {
+	if (editableRoot.value && !props.readOnly && !props.disabled) {
 		editableRoot.value.edit();
 	}
 }
@@ -101,6 +101,7 @@ defineExpose({ forceFocus, forceCancel });
 		:readonly="readOnly"
 		select-on-focus
 		auto-resize
+		@click="forceFocus"
 		@submit="onSubmit"
 		@update:model-value="onInput"
 		@update:state="onStateChange"