admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-16 17:46:45 +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();
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();

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

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