diff --git a/packages/frontend/editor-ui/src/components/FixedCollectionParameter.test.ts b/packages/frontend/editor-ui/src/components/FixedCollectionParameter.test.ts
index 3e86aa949e..9937535018 100644
--- a/packages/frontend/editor-ui/src/components/FixedCollectionParameter.test.ts
+++ b/packages/frontend/editor-ui/src/components/FixedCollectionParameter.test.ts
@@ -4,7 +4,10 @@ import FixedCollectionParameter, { type Props } from '@/components/FixedCollecti
import { STORES } from '@n8n/stores';
import { createTestingPinia } from '@pinia/testing';
import userEvent from '@testing-library/user-event';
+import { fireEvent, waitFor } from '@testing-library/vue';
import { setActivePinia } from 'pinia';
+import { nextTick } from 'vue';
+
describe('FixedCollectionParameter.vue', () => {
const pinia = createTestingPinia({
initialState: {
@@ -107,4 +110,51 @@ describe('FixedCollectionParameter.vue', () => {
],
]);
});
+
+ it('[SUG-128] maintains focus after receiving updated values even when the inner most property shares the same name with its parent', async () => {
+ const myProps: Props = {
+ ...props,
+ parameter: {
+ ...props.parameter,
+ options: [
+ {
+ name: 'p0',
+ displayName: 'Values',
+ values: [
+ {
+ displayName: 'Output Name',
+ name: 'p0',
+ type: 'string',
+ default: '',
+ },
+ ],
+ },
+ ],
+ },
+ };
+ const rendered = renderComponent({
+ props: {
+ ...myProps,
+ nodeValues: { parameters: { rules: { p0: [{ p0: 'Test' }] } } },
+ values: { p0: [{ p0: 'Test' }] },
+ },
+ });
+
+ const input = rendered.getByRole('textbox');
+
+ await waitFor(() => expect(input).toHaveValue('Test'));
+ await fireEvent.focus(input);
+
+ expect(document.activeElement).toBe(input);
+
+ await rendered.rerender({
+ ...myProps,
+ nodeValues: { parameters: { rules: { p0: [{ p0: 'Updated' }] } } },
+ values: { p0: [{ p0: 'Updated' }] },
+ });
+ await nextTick();
+ expect(input).toBeInTheDocument();
+ expect(input).toHaveValue('Updated');
+ expect(document.activeElement).toBe(input);
+ });
});
diff --git a/packages/frontend/editor-ui/src/components/FixedCollectionParameter.vue b/packages/frontend/editor-ui/src/components/FixedCollectionParameter.vue
index 77651d48e2..f23735298e 100644
--- a/packages/frontend/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/frontend/editor-ui/src/components/FixedCollectionParameter.vue
@@ -1,7 +1,12 @@
@@ -257,7 +266,7 @@ const trackWorkflowInputFieldAdded = () => {
/>