From 485e916f55d08cd576e00b0f397c61fe57cad02f Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 26 Apr 2024 09:16:26 -0300
Subject: [PATCH] Add input focus

---
 src/pages/Item/Card/ItemBarcode.vue | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/pages/Item/Card/ItemBarcode.vue b/src/pages/Item/Card/ItemBarcode.vue
index 6a13a9ea7..d0beab350 100644
--- a/src/pages/Item/Card/ItemBarcode.vue
+++ b/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"