fix: Update ColumnValueInputWrapper to focus on the last input after adding an array item

Author: SerVitasik

adminforth/spa/src/components/ColumnValueInputWrapper.vue

@@ -49,7 +49,7 @@
 <script setup lang="ts">
   import { IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
   import ColumnValueInput from "./ColumnValueInput.vue";
-  import { ref } from 'vue';
+  import { ref, nextTick } from 'vue';
   
   const props = defineProps<{
     source: 'create' | 'edit',
@@ -65,8 +65,9 @@
   
   const arrayItemRefs = ref([]);
   
-  function addArrayItem() {
+  async function addArrayItem() {
     props.setCurrentValue(props.column.name, props.currentValues[props.column.name], props.currentValues[props.column.name].length);
-    emit('focus-last-input', props.column.name);
+    await nextTick();
+    arrayItemRefs.value[arrayItemRefs.value.length - 1].focus();
   }
 </script> 

adminforth/spa/src/components/GroupsTable.vue

@@ -53,7 +53,6 @@
               @update:unmasked="unmasked[$event] = !unmasked[$event]"
               @update:inValidity="customComponentsInValidity[$event.name] = $event.value"
               @update:emptiness="customComponentsEmptiness[$event.name] = $event.value"
-              @focus-last-input="focusOnLastInput"
             />
             <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
             <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
@@ -85,8 +84,6 @@
     columnOptions: any,
   }>();
 
-  const arrayItemRefs = ref([]);
-
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
   const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
   const allColumnsHaveCustomComponent = computed(() => {
@@ -98,12 +95,6 @@
 
   const emit = defineEmits(['update:customComponentsInValidity', 'update:customComponentsEmptiness']);
 
-  async function focusOnLastInput(column) {
-    // wait for element to register
-    await nextTick();
-    arrayItemRefs.value[arrayItemRefs.value.length - 1].focus();
-  }
-
   watch(customComponentsInValidity.value, (newVal) => {
     emit('update:customComponentsInValidity', newVal);
   });