Focus on name input area is active when a new item is created

akaunting · Jul 30, 2021 · db8507b · db8507b
1 parent 1e128ae
commit db8507b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/resources/assets/js/components/AkauntingItemButton.vue b/resources/assets/js/components/AkauntingItemButton.vue
@@ -280,6 +280,8 @@ export default {
         onItemList() {
             this.show.item_list = true;
 
+            console.log(this.$refs['input-item-field-' + this._uid].focus());
+
             setTimeout(function() {
                 this.$refs['input-item-field-' + this._uid].focus();
             }.bind(this), 100);
@@ -367,9 +369,8 @@ export default {
 
             this.selected_items.push(item);
 
-            this.$emit('item', item);
+            this.$emit('item', item)
             this.$emit('items', this.selected_items);
-
             this.setItemList(this.items);
 
             this.show.item_selected = false;

diff --git a/resources/assets/js/plugins/functions.js b/resources/assets/js/plugins/functions.js
@@ -15,4 +15,14 @@ function getQueryVariable(variable) {
     return(false);
 }
 
-export {getQueryVariable}
+function promiseTimeout(time) {
+    return new Promise(function(resolve,reject) {
+      setTimeout(function(){
+          resolve(time);
+      }, time);
+    });
+};
+
+
+
+export {getQueryVariable, promiseTimeout}
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
@@ -9,6 +9,8 @@ require('./../../bootstrap');
 import Vue from 'vue';
 
 import DashboardPlugin from './../../plugins/dashboard-plugin';
+import { promiseTimeout } from './../../plugins/functions';
+
 
 import Global from './../../mixins/global';
 
@@ -288,11 +290,16 @@ const app = new Vue({
             return totals_taxes;
         },
 
+
         // Select Item added form
         onSelectedItem(item) {
+            let { index } = item;
+
             let total = 1 * item.price;
             let item_taxes = [];
 
+            promiseTimeout(500).then(() => this.$refs['name-input'][index].focus());
+
             if (item.tax_ids) {
                 item.tax_ids.forEach(function (tax_id, index) {
                     if (this.taxes.includes(tax_id)) {
@@ -466,6 +473,7 @@ const app = new Vue({
                         methods: {
                             onSubmit(event) {
                                 this.form = event;
+
                                 this.form.response = {};
 
                                 this.loading = true;

diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
@@ -32,7 +32,9 @@
                                             <span class="aka-text aka-text--body" tabindex="0" v-html="row.name" v-if="row.item_id"></span>
                                             <div v-else>
                                                 @stack('name_input_start')
-                                                <input type="text"
+                                                <input 
+                                                    type="text"
+                                                    ref="name-input"
                                                     class="form-control"
                                                     :name="'items.' + index + '.name'"
                                                     autocomplete="off"