feat: focusOptions changes, replaced focusName - with field and index, added focusOptions to all array methods

src/App.vue

@@ -76,9 +76,7 @@
                 </div>
                 <button
                   type="button"
-                  @click="
-                    prepend({ firstName: 'prepend' }, { focusName: 'arrayField.0.firstName' })
-                  "
+                  @click="prepend({ firstName: 'prepend' }, { name: 'firstName' })"
                 >
                   Prepend
                 </button>

src/components/ValidationFieldArray.vue

@@ -88,51 +88,72 @@ function touch() {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function append(value: Record<string, any>, options?: FocusOptions) {
+function append(value: Record<string, any>, focusOptions?: FocusOptions) {
   value[keyName.value] = getId(value);
   fields.value.push(value);
   touch();
-  handleFocus(options);
+  if (focusOptions) {
+    // by default focus on last field
+    handleFocus({ index: fields.value.length - 1, ...focusOptions });
+  }
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function prepend(value: Record<string, any>, options?: FocusOptions) {
+function prepend(value: Record<string, any>, focusOptions?: FocusOptions) {
   value[keyName.value] = getId(value);
   fields.value.unshift(value);
   touch();
-  handleFocus(options);
+  if (focusOptions) {
+    // by default focus on first field
+    handleFocus(focusOptions);
+  }
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function insert(index: number, value: Record<string, any>, options?: FocusOptions) {
+function insert(index: number, value: Record<string, any>, focusOptions?: FocusOptions) {
   value[keyName.value] = getId(value);
   fields.value.splice(index, 0, value);
   touch();
-  handleFocus(options);
+  if (focusOptions) {
+    // by default focus on inserted field
+    handleFocus({ index, ...focusOptions });
+  }
 }
-function swap(from: number, to: number) {
+function swap(from: number, to: number, focusOptions?: FocusOptions) {
   const temp = fields.value[from];
   fields.value[from] = fields.value[to];
   fields.value[to] = temp;
   touch();
+  if (focusOptions) {
+    // by default focus on swapped field
+    handleFocus({ index: to, ...focusOptions });
+  }
 }
-function move(from: number, to: number) {
+function move(from: number, to: number, focusOptions?: FocusOptions) {
   fields.value.splice(to, 0, fields.value.splice(from, 1)[0]);
   touch();
+  if (focusOptions) {
+    // by default focus on moved field
+    handleFocus({ index: to, ...focusOptions });
+  }
 }
-function remove(index: number) {
+function remove(index: number, focusOptions?: FocusOptions) {
   fields.value.splice(index, 1);
   touch();
+
+  if (focusOptions && fields.value.length) {
+    // by default focus on previous field, if there is no previous field focus on first field
+    handleFocus({ index: Math.max(index - 1, 0), ...focusOptions });
+  }
 }
 
-function handleFocus(options?: FocusOptions) {
-  if (!options) {
-    return;
+function handleFocus({ field, index = 0 }: FocusOptions) {
+  if (!field) {
+    throw new Error(`Field name is required for focus, please provide field name in focus options`);
   }
+
+  const itemName = `${name.value}.${index || 0}.${field}`;
   nextTick(() => {
-    const fieldComponent = fieldComponents.value.find(({ name }) => name === options.focusName);
-    if (!fieldComponent) {
-      return;
-    }
-    fieldComponent.onFocus();
+    const fieldComponent = fieldComponents.value.find(({ name }) => name === itemName);
+    fieldComponent?.onFocus();
   });
 }
 

src/types/field-array.ts

@@ -1,3 +1,4 @@
 export interface FocusOptions {
-  focusName: string;
+  field: string;
+  index?: number;
 }

tests/unit/ValidationFieldArray.test.js

@@ -29,6 +29,11 @@ describe('ValidationFieldArray', () => {
     });
   };
 
+  const focusTest = (name) => {
+    const emits = wrapper.emitted().focus;
+    expect(emits[emits.length - 1]).toContainEqual({ name });
+  };
+
   it('should render array fields', async () => {
     createComponent({
       props: {
@@ -146,7 +151,8 @@ describe('ValidationFieldArray', () => {
     await nextTick();
     expect(wrapper.findAllComponents(BaseInput).length).toBe(3);
 
-    await wrapper.find('#append').trigger('click', { firstName: 'new name' });
+    await wrapper.find('#append').trigger('click');
+    focusTest('arrayField.1.firstName');
 
     const baseInputWrappers = wrapper.findAllComponents(BaseInput);
     expect(baseInputWrappers.length).toBe(4);
@@ -203,6 +209,8 @@ describe('ValidationFieldArray', () => {
 
     await wrapper.find('#remove').trigger('click');
 
+    focusTest('arrayField.0.firstName');
+
     expect(wrapper.findComponent(FormInfo).props().errors).toEqual({
       'my.nested.value': [],
       'my-input': [],
@@ -271,7 +279,8 @@ describe('ValidationFieldArray', () => {
       ]
     });
 
-    await wrapper.find('#prepend').trigger('click', { firstName: 'new name' });
+    await wrapper.find('#prepend').trigger('click');
+    focusTest('arrayField.0.firstName');
 
     expect(wrapper.findComponent(FormInfo).props().errors).toEqual({
       'my.nested.value': [],
@@ -354,6 +363,7 @@ describe('ValidationFieldArray', () => {
       ]
     });
     expect(wrapper.findComponent(FormInfo).props().values.arrayField[1].type).toEqual(undefined);
+    focusTest('arrayField.1.firstName');
     expect(wrapper.findAllComponents(BaseInput).at(3).props().modelValue).toBe('insert');
   });
 
@@ -407,6 +417,7 @@ describe('ValidationFieldArray', () => {
     const formInfoWrapper = wrapper.findComponent(FormInfo);
 
     await wrapper.find('#swap').trigger('click');
+    focusTest('arrayField.2.firstName');
 
     expect(formInfoWrapper.props().errors).toEqual({
       'my.nested.value': [],
@@ -540,6 +551,8 @@ describe('ValidationFieldArray', () => {
 
     await wrapper.find('#move').trigger('click');
 
+    focusTest('arrayField.2.firstName');
+
     expect(formInfoWrapper.props().errors).toEqual({
       'my.nested.value': [],
       'my-input': [],

tests/unit/ValidationForm.vue

@@ -103,7 +103,10 @@
             >
               <ValidationField :name="`${arrayName}.${index}.id`" />
               <ValidationField :name="`${arrayName}.${index}.type`" />
-              <ValidationField :name="`${arrayName}.${index}.firstName`">
+              <ValidationField
+                :name="`${arrayName}.${index}.firstName`"
+                @should-focus="$emit('focus', $event)"
+              >
                 <template
                   #default="{
                     modelValue,
@@ -132,42 +135,42 @@
             <button
               id="append"
               type="button"
-              @click="append"
+              @click="append({ firstName: 'new name' }, { field: 'firstName' })"
             >
               Append
             </button>
             <button
               id="prepend"
               type="button"
-              @click="prepend"
+              @click="prepend({ firstName: 'new name' }, { field: 'firstName' })"
             >
               Prepend
             </button>
             <button
               id="insert"
               type="button"
-              @click="insert(1, { firstName: 'insert' })"
+              @click="insert(1, { firstName: 'insert' }, { field: 'firstName' })"
             >
               Insert
             </button>
             <button
               id="swap"
               type="button"
-              @click="swap(0, 2)"
+              @click="swap(0, 2, { field: 'firstName' })"
             >
               Swap
             </button>
             <button
               id="move"
               type="button"
-              @click="move(0, 2)"
+              @click="move(0, 2, { field: 'firstName' })"
             >
               Move
             </button>
             <button
               id="remove"
               type="button"
-              @click="remove(1)"
+              @click="remove(1, { field: 'firstName' })"
             >
               Remove
             </button>
@@ -267,7 +270,8 @@ export default {
   emits: {
     submit: null,
     dirty: null,
-    change: null
+    change: null,
+    focus: null
   },
   methods: {
     onSubmit(values, options) {