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

src/App.vue

@@ -112,10 +112,7 @@
                     </template>
                   </ValidationField>
                 </div>
-                <button
-                  type="button"
-                  @click="prepend({ name: 'prepend' }, { focusName: 'bigArray.5.name' })"
-                >
+                <button type="button" @click="prepend({ name: 'prepend' }, { field: 'name' })">
                   Prepend
                 </button>
                 <button type="button" @click="append({ name: 'append' })">Append</button>

src/components/ValidationFieldArray.js

@@ -110,13 +110,11 @@ export default {
 
       this.fieldComponents.splice(index, 1);
     },
-    handleFocus({ focusName }) {
+    handleFocus({ field, index }) {
+      const itemName = `${this.name}.${index || 0}.${field}`;
       this.$nextTick(() => {
-        const fieldComponent = this.fieldComponents.find(({ name }) => name === focusName);
-        if (!fieldComponent) {
-          return;
-        }
-        fieldComponent.onFocus();
+        const fieldComponent = this.fieldComponents.find(({ name }) => name === itemName);
+        fieldComponent?.onFocus();
       });
     },
     getNormalizedName(name) {
@@ -155,14 +153,16 @@ export default {
       this.fields.push(value);
       this.touch();
       if (focusOptions) {
-        this.handleFocus(focusOptions);
+        // by default focus on last field
+        this.handleFocus({ index: this.fields.length - 1, ...focusOptions });
       }
     },
     prepend(value, focusOptions = null) {
       value[this.keyName] = this.getId(value);
       this.fields.unshift(value);
       this.touch();
       if (focusOptions) {
+        // by default focus on first field
         this.handleFocus(focusOptions);
       }
     },
@@ -171,22 +171,36 @@ export default {
       this.fields.splice(index, 0, value);
       this.touch();
       if (focusOptions) {
-        this.handleFocus(focusOptions);
+        // by default focus on inserted field
+        this.handleFocus({ index, ...focusOptions });
       }
     },
-    swap(from, to) {
+    swap(from, to, focusOptions = null) {
       const temp = this.fields[from];
       this.$set(this.fields, from, this.fields[to]);
       this.$set(this.fields, to, temp);
       this.touch();
+      if (focusOptions) {
+        // by default focus on swapped field
+        this.handleFocus({ index: to, ...focusOptions });
+      }
     },
-    move(from, to) {
+    move(from, to, focusOptions = null) {
       this.fields.splice(to, 0, this.fields.splice(from, 1)[0]);
       this.touch();
+      if (focusOptions) {
+        // by default focus on moved field
+        this.handleFocus({ index: to, ...focusOptions });
+      }
     },
-    remove(index) {
+    remove(index, focusOptions = null) {
       this.fields.splice(index, 1);
       this.touch();
+
+      if (focusOptions && this.fields.length) {
+        // by default focus on previous field, if there is no previous field focus on first field
+        this.handleFocus({ index: index - 1 || 0, ...focusOptions });
+      }
     }
   },
   render(h) {

tests/unit/ValidationFieldArray.test.js

@@ -20,12 +20,14 @@ const resolver = yupResolver(
 
 describe('ValidationFieldArray', () => {
   let wrapper;
+  let handleFocus;
 
   const createComponent = ({ props } = {}) => {
     wrapper = mount(ValidationForm, {
       propsData: props,
       attachTo: document.body
     });
+    handleFocus = jest.spyOn(wrapper.vm, 'handleFocus');
   };
 
   it('should render array fields', async () => {
@@ -144,8 +146,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');
+    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.1.firstName' });
     const baseInputWrappers = wrapper.findAllComponents(BaseInput);
     expect(baseInputWrappers.length).toBe(4);
     expect(baseInputWrappers.at(3).props().modelValue).toBe('new name');
@@ -199,7 +201,7 @@ describe('ValidationFieldArray', () => {
     });
 
     await wrapper.find('#remove').trigger('click');
-
+    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.0.firstName' });
     expect(wrapper.findComponent(FormInfo).props().errors).toEqual({
       'my.nested.value': [],
       'my-input': [],
@@ -267,8 +269,9 @@ describe('ValidationFieldArray', () => {
       ]
     });
 
-    await wrapper.find('#prepend').trigger('click', { firstName: 'new name' });
+    await wrapper.find('#prepend').trigger('click');
 
+    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.0.firstName' });
     expect(wrapper.findComponent(FormInfo).props().errors).toEqual({
       'my.nested.value': [],
       'my-input': [],
@@ -350,9 +353,9 @@ describe('ValidationFieldArray', () => {
     });
 
     expect(wrapper.findComponent(FormInfo).props().values.arrayField[1].type).toEqual(undefined);
+    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.1.firstName' });
     expect(wrapper.findAllComponents(BaseInput).at(3).props().modelValue).toBe('insert');
   });
-
   it('swap should work', async () => {
     createComponent({
       props: {
@@ -444,6 +447,7 @@ describe('ValidationFieldArray', () => {
 
     await wrapper.find('#swap').trigger('click');
 
+    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.2.firstName' });
     expect(formInfoWrapper.props().errors).toEqual({
       'my.nested.value': [],
       'my-input': [],
@@ -534,6 +538,7 @@ describe('ValidationFieldArray', () => {
 
     await wrapper.find('#move').trigger('click');
 
+    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.2.firstName' });
     expect(formInfoWrapper.props().errors).toEqual({
       'my.nested.value': [],
       'my-input': [],

tests/unit/ValidationForm.vue

@@ -96,7 +96,10 @@
             <div v-for="(field, index) in fields" :key="field.id">
               <ValidationField :name="`${arrayName}.${index}.id`" />
               <ValidationField :name="`${arrayName}.${index}.type`" />
-              <ValidationField :name="`${arrayName}.${index}.firstName`">
+              <ValidationField
+                :name="`${arrayName}.${index}.firstName`"
+                @should-focus="handleFocus"
+              >
                 <template
                   #default="{
                     modelValue,
@@ -122,14 +125,36 @@
                 </template>
               </ValidationField>
             </div>
-            <button id="append" type="button" @click="append">Append</button>
-            <button id="prepend" type="button" @click="prepend">Prepend</button>
-            <button id="insert" type="button" @click="insert(1, { firstName: 'insert' })">
+            <button
+              id="append"
+              type="button"
+              @click="append({ firstName: 'new name' }, { field: 'firstName' })"
+            >
+              Append
+            </button>
+            <button
+              id="prepend"
+              type="button"
+              @click="prepend({ firstName: 'new name' }, { field: 'firstName' })"
+            >
+              Prepend
+            </button>
+            <button
+              id="insert"
+              type="button"
+              @click="insert(1, { firstName: 'insert' }, { field: 'firstName' })"
+            >
               Insert
             </button>
-            <button id="swap" type="button" @click="swap(0, 2)">Swap</button>
-            <button id="move" type="button" @click="move(0, 2)">Move</button>
-            <button id="remove" type="button" @click="remove(1)">Remove</button>
+            <button id="swap" type="button" @click="swap(0, 2, { field: 'firstName' })">
+              Swap
+            </button>
+            <button id="move" type="button" @click="move(0, 2, { field: 'firstName' })">
+              Move
+            </button>
+            <button id="remove" type="button" @click="remove(1, { field: 'firstName' })">
+              Remove
+            </button>
             <button
               id="arrayChange"
               type="button"
@@ -213,6 +238,9 @@ export default {
     }
   },
   methods: {
+    handleFocus({ name }) {
+      this.$el.querySelector(`[name="${name}"]`)?.focus();
+    },
     onSubmit(values, options) {
       this.$emit('submit', values, options);
     }