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"