Add input focus

src/pages/Item/Card/ItemBarcode.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -11,7 +11,20 @@ const { t } = useI18n();
 
 const itemBarcodeRef = ref(null);
 
-onMounted(() => {
+const insertRow = () => {
+    itemBarcodeRef.value.insert();
+    focusLastInput();
+};
+
+const focusLastInput = () => {
+    nextTick(() => {
+        const inputs = document.querySelectorAll('[focusable-input]');
+        const lastInput = inputs[inputs.length - 1];
+        if (lastInput) lastInput.focus();
+    });
+};
+
+onMounted(async () => {
     if (itemBarcodeRef.value) itemBarcodeRef.value.reload();
 });
 </script>
@@ -31,7 +44,7 @@ onMounted(() => {
                 url="ItemBarcodes"
             >
                 <template #body="{ rows }">
-                    <QCard class="q-px-lg q-py-md">
+                    <QCard v-if="rows.length > 0" class="q-px-lg q-py-md">
                         <div
                             v-for="(row, index) in rows"
                             :key="index"
@@ -41,6 +54,7 @@ onMounted(() => {
                                 :label="t('Code')"
                                 v-model="row.code"
                                 class="full-width"
+                                focusable-input
                             />
                             <QIcon
                                 @click="itemBarcodeRef.remove([row])"
@@ -55,7 +69,7 @@ onMounted(() => {
                             </QIcon>
                         </div>
                         <QIcon
-                            @click="itemBarcodeRef.insert()"
+                            @click="insertRow()"
                             class="cursor-pointer fill-icon-on-hover"
                             color="primary"
                             name="add_circle"