diff --git a/packages/@core/ui-kit/form-ui/__tests__/form-integration.test.ts b/packages/@core/ui-kit/form-ui/__tests__/form-integration.test.ts index d45e9791..63c64e21 100644 --- a/packages/@core/ui-kit/form-ui/__tests__/form-integration.test.ts +++ b/packages/@core/ui-kit/form-ui/__tests__/form-integration.test.ts @@ -485,6 +485,37 @@ describe('useVbenForm integration', () => { }); }); + it('preserves array row inputs and focus while editing', async () => { + const [Form] = useVbenForm({ + schema: [ + { + children: [ + { + component: TestInput, + fieldName: 'name', + label: 'Name', + }, + ], + defaultValue: [{ name: 'Ada' }], + fieldName: 'contacts', + type: 'array', + }, + ], + }); + const wrapper = mount(Form, { attachTo: document.body }); + wrappers.push(wrapper); + await flushPromises(); + const input = wrapper.get('input'); + const inputElement = input.element; + inputElement.focus(); + + await input.setValue('Ada Lovelace'); + await flushPromises(); + + expect(wrapper.get('input').element).toBe(inputElement); + expect(document.activeElement).toBe(inputElement); + }); + it('scopes resolve dependencies to array rows', async () => { const resolve = vi.fn(({ schema }: Record) => ({ componentProps: { diff --git a/packages/@core/ui-kit/form-ui/src/components/form-field-array.vue b/packages/@core/ui-kit/form-ui/src/components/form-field-array.vue index 963e547a..ca9a8796 100644 --- a/packages/@core/ui-kit/form-ui/src/components/form-field-array.vue +++ b/packages/@core/ui-kit/form-ui/src/components/form-field-array.vue @@ -10,7 +10,7 @@ import { VbenIconButton, VbenRenderContent, } from '@vben-core/shadcn-ui'; -import { cn, isObject, set } from '@vben-core/shared/utils'; +import { cn, set } from '@vben-core/shared/utils'; import { injectRenderFormProps } from '../form-render/context'; import FormField from '../form-render/form-field.vue'; @@ -72,8 +72,6 @@ if (!form) { } const formActions = form; const arrayValue = formActions.useFieldValue(props.name); -const rowKeys = new WeakMap(); -let nextRowKey = 0; const fields = computed[]>(() => { return Array.isArray(arrayValue.value) ? arrayValue.value : []; @@ -124,20 +122,6 @@ function removeRow(index: number) { void formActions.removeFieldValue(arrayPath.value, index); } -function getRowKey(row: Record, index: number) { - if (!isObject(row)) { - return `${arrayPath.value}-${index}`; - } - const existingKey = rowKeys.get(row); - if (existingKey) { - return existingKey; - } - nextRowKey += 1; - const key = `${arrayPath.value}-${nextRowKey}`; - rowKeys.set(row, key); - return key; -} - function rowSchemas(index: number) { return props.schema.map((col) => createArrayChildSchema(col as never, { @@ -179,8 +163,8 @@ function rowSchemas(index: number) {