admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Robert Squires
2025-08-04 13:38:12 +01:00
committed by GitHub
parent 279dce639a
commit 7b92e33b3b
4 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
cypress/e2e/2-credentials.cy.ts
View File

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

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

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

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

@@ -105,4 +105,24 @@ describe('N8nInlineTextEdit', () => {
const emittedEvents = wrapper.emitted('update:model-value'); const emittedEvents = wrapper.emitted('update:model-value');
expect(emittedEvents).toBeUndefined(); 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();
});
}); });

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

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