diff --git a/cypress/e2e/2-credentials.cy.ts b/cypress/e2e/2-credentials.cy.ts
index 2845a87286..03eb0b4e27 100644
--- a/cypress/e2e/2-credentials.cy.ts
+++ b/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();
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts
index 4a4903476d..373622769f 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts
@@ -15,7 +15,7 @@ const Template: StoryFn = (args, { argTypes }) => ({
},
template: `
-
+
`,
});
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.test.ts
index 83c1eb0e2a..83c214c28d 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.test.ts
+++ b/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();
+ });
});
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue
index 21cb894e86..64f7b12151 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue
+++ b/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"