From 8d0d19d4c7f1d017f58ab68e6285ef59ed3e2f09 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 31 Jan 2025 14:17:08 +0100
Subject: [PATCH] fix: refs #8388 update the right row

---
 src/pages/InvoiceIn/Card/InvoiceInVat.vue | 36 ++++++++++++++++-------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInVat.vue b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
index 74f6fd3cb60..bd8edfeebc5 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInVat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
@@ -25,7 +25,6 @@ const sageTaxTypes = ref([]);
 const sageTransactionTypes = ref([]);
 const rowsSelected = ref([]);
 const invoiceInFormRef = ref();
-const expenseRef = ref();
 
 defineProps({
     actionIcon: {
@@ -139,7 +138,7 @@ function taxRate(invoiceInTax) {
     return ((taxTypeSage / 100) * taxableBase).toFixed(2);
 }
 
-function autocompleteExpense(evt, row, col) {
+function autocompleteExpense(evt, row, col, ref) {
     const val = evt.target.value;
     if (!val) return;
 
@@ -148,7 +147,7 @@ function autocompleteExpense(evt, row, col) {
         ({ id }) => id == useAccountShortToStandard(param),
     );
 
-    expenseRef.value.vnSelectDialogRef.vnSelectRef.toggleOption(lookup);
+    ref.vnSelectDialogRef.vnSelectRef.toggleOption(lookup);
 }
 
 function setCursor(ref) {
@@ -156,7 +155,9 @@ function setCursor(ref) {
         const select = ref.vnSelectDialogRef
             ? ref.vnSelectDialogRef.vnSelectRef
             : ref.vnSelectRef;
-        select.$el.querySelector('input').setSelectionRange(0, 0);
+        const input = select.$el.querySelector('input');
+        input.focus();
+        input.setSelectionRange(0, 0);
     });
 }
 </script>
@@ -196,15 +197,24 @@ function setCursor(ref) {
                 <template #body-cell-expense="{ row, col }">
                     <QTd>
                         <VnSelectDialog
-                            ref="expenseRef"
+                            :ref="`expenseRef-${row.$index}`"
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
                             :option-label="col.optionLabel"
                             :filter-options="['id', 'name']"
                             :tooltip="t('Create a new expense')"
-                            @keydown.tab="autocompleteExpense($event, row, col)"
-                            @update:model-value="setCursor($refs.expenseRef)"
+                            @keydown.tab="
+                                autocompleteExpense(
+                                    $event,
+                                    row,
+                                    col,
+                                    $refs[`expenseRef-${row.$index}`],
+                                )
+                            "
+                            @update:model-value="
+                                setCursor($refs[`expenseRef-${row.$index}`])
+                            "
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
@@ -231,14 +241,16 @@ function setCursor(ref) {
                 <template #body-cell-sageiva="{ row, col }">
                     <QTd>
                         <VnSelect
-                            ref="sageivaRef"
+                            :ref="`sageivaRef-${row.$index}`"
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
                             :option-label="col.optionLabel"
                             :filter-options="['id', 'vat']"
                             data-cy="vat-sageiva"
-                            @update:model-value="setCursor($refs.sageivaRef)"
+                            @update:model-value="
+                                setCursor($refs[`sageivaRef-${row.$index}`])
+                            "
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">
@@ -256,13 +268,15 @@ function setCursor(ref) {
                 <template #body-cell-sagetransaction="{ row, col }">
                     <QTd>
                         <VnSelect
-                            ref="sagetransactionRef"
+                            :ref="`sagetransactionRef-${row.$index}`"
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
                             :option-label="col.optionLabel"
                             :filter-options="['id', 'transaction']"
-                            @update:model-value="setCursor($refs.sagetransactionRef)"
+                            @update:model-value="
+                                setCursor($refs[`sagetransactionRef-${row.$index}`])
+                            "
                         >
                             <template #option="scope">
                                 <QItem v-bind="scope.itemProps">