Add unique ref for focus events

resources/assets/js/components/AkauntingItemButton.vue

@@ -356,11 +356,8 @@ export default {
         onItemSelected(clickSelectedItem) {
             let item; 
             const firstMatchedItem = this.item_list[0];
-            
             const isClickSelectedItem = clickSelectedItem ? true : false;
-            
             isClickSelectedItem ? item = clickSelectedItem  : item = firstMatchedItem;
-            
             const indexeditem = { ...item, index: this.currentIndex };
 
             this.addItem(indexeditem, 'oldItem');
@@ -383,7 +380,7 @@ export default {
 
         onItemCreate() {
             let item = {
-                index: this.newItems.length,
+                index: this.currentIndex,
                 key: 0,
                 value: this.search,
                 type: this.type,
@@ -394,7 +391,7 @@ export default {
                 tax_ids: [],
             };
             
-            this.newItems.push(item)
+            this.newItems.push(item);
 
             this.addItem(item, 'newItem');
         },
@@ -528,7 +525,7 @@ export default {
             return this.sortItems();
         },
         currentIndex() {
-            return this.selected_items.length;
+            return this.$root.form.items.length;
         },
     },
 

resources/assets/js/views/common/documents.js

@@ -50,6 +50,7 @@ const app = new Vue({
             discounts: [],
             tax_id: [],
             items: [],
+            selected_items:[],
             taxes: [],
             page_loaded: false,
             currencies: [],
@@ -96,8 +97,10 @@ const app = new Vue({
     },
 
     methods: {
-        onRefFocus(ref, index) {
+        onRefFocus(ref) {
-            setPromiseTimeout(100).then(() => this.$refs[ref][index].focus());
+            let index = this.form.items.length - 1;  
+
+            this.$refs['items-' + index + '-'  + ref][0].focus();
         },
 
         onCalculateTotal() {
@@ -305,15 +308,16 @@ const app = new Vue({
             return totals_taxes;
         },
 
+        onSelectedItem(item){
+            this.onAddItem(item);
+        },
+
         // addItem to list
         onAddItem(payload) {
-            let { item, itemType } = payload
+            let { item, itemType } = payload;
-            let { index } = item;
             let inputRef = `${itemType === 'newItem' ? 'name' : 'description'}`; // indication for which input to focus first
             let total = 1 * item.price;
             let item_taxes = [];
-
-            this.onRefFocus(inputRef, index); // trigger initial focus event on input or description based on type of item added to the list
             
             if (item.tax_ids) {
                 item.tax_ids.forEach(function (tax_id, index) {
@@ -359,8 +363,14 @@ const app = new Vue({
                 // invoice_item_checkbox_sample: [],
             });
 
+            setTimeout(function() {
+                this.onRefFocus(inputRef);
+            }.bind(this), 100);
+
             setTimeout(function() {
                 this.onCalculateTotal();
+
+                this.onRefFocus(inputRef);
             }.bind(this), 800);
         },
 

resources/views/components/documents/form/line-item.blade.php

@@ -34,7 +34,7 @@
                                                 @stack('name_input_start')
                                                 <input 
                                                     type="text"
-                                                    ref="name"
+                                                    :ref="'items-' + index + '-name'"
                                                     class="form-control"
                                                     :name="'items.' + index + '.name'"
                                                     autocomplete="off"
@@ -58,7 +58,7 @@
                                         @if (!$hideDescription)
                                             <textarea
                                                 class="form-control"
-                                                ref="description"
+                                                :ref="'items-' + index + '-description'"
                                                 placeholder="{{ trans('items.enter_item_description') }}"
                                                 style="height: 46px; overflow: hidden;"
                                                 :name="'items.' + index + '.description'"
@@ -81,7 +81,7 @@
                                         <input
                                             type="number"
                                             min="0"
-                                            ref="quantity"
+                                            :ref="'items-' + index + '-quantity'"
                                             class="form-control text-center p-0 input-number-disabled"
                                             :name="'items.' + index + '.quantity'"
                                             autocomplete="off"

resources/views/components/select-item-button.blade.php

@@ -7,7 +7,7 @@
     :dynamic-currency="currency"
     :items="{{ json_encode($items) }}"
     :search-char-limit="{{ $searchCharLimit }}"
-    @item="onAddItem($event)"
+    @item="onSelectedItem($event)"
     add-item-text="{{ trans('general.form.add_an', ['field' => trans_choice('general.items', 1)]) }}"
     create-new-item-text="{{ trans('general.title.create', ['type' =>  trans_choice('general.items', 1)]) }}"
 ></akaunting-item-button>