From 22dcedda7999ba950c679ffacdcdf9ae1e15b61f Mon Sep 17 00:00:00 2001
From: thefalconx33 <thefalconx33@gmail.com>
Date: Mon, 5 Aug 2019 17:16:35 +0530
Subject: [PATCH] Focus on form section's first input

---
 ui/components/Form/FormActions.vue | 55 +++++++++++++++---------------
 ui/components/Form/FormLayout.vue  |  8 ++---
 ui/components/controls/Table.vue   |  8 +++--
 3 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/ui/components/Form/FormActions.vue b/ui/components/Form/FormActions.vue
index d3c0b75d..dbeb172f 100644
--- a/ui/components/Form/FormActions.vue
+++ b/ui/components/Form/FormActions.vue
@@ -2,7 +2,12 @@
   <div class="frappe-form-actions d-flex justify-content-between align-items-center">
     <h5 class="m-0">{{ title }}</h5>
     <div class="d-flex">
-      <f-button primary v-if="showSave" :disabled="disableSave" @click="$emit('save')">{{ _('Save') }}</f-button>
+      <f-button
+        primary
+        v-if="showSave"
+        :disabled="disableSave"
+        @click="$emit('save')"
+      >{{ _('Save') }}</f-button>
       <f-button primary v-if="showSubmit" @click="$emit('submit')">{{ _('Submit') }}</f-button>
       <f-button secondary v-if="showRevert" @click="$emit('revert')">{{ _('Revert') }}</f-button>
       <div class="ml-2" v-if="showPrint">
@@ -31,7 +36,7 @@ export default {
       showNextAction: false,
       showPrint: false,
       disableSave: false
-    }
+    };
   },
   created() {
     this.doc.on('change', () => {
@@ -44,36 +49,32 @@ export default {
       this.isDirty = this.doc._dirty;
 
       this.showSubmit =
-        this.meta.isSubmittable
-        && !this.isDirty
-        && !this.doc.isNew()
-        && this.doc.submitted === 0;
+        this.meta.isSubmittable &&
+        !this.isDirty &&
+        !this.doc.isNew() &&
+        this.doc.submitted === 0;
 
       this.showRevert =
-        this.meta.isSubmittable
-        && !this.isDirty
-        && !this.doc.isNew()
-        && this.doc.submitted === 1;
+        this.meta.isSubmittable &&
+        !this.isDirty &&
+        !this.doc.isNew() &&
+        this.doc.submitted === 1;
 
-      this.showNextAction = 1
+      this.showNextAction = 1;
 
-      this.showNextAction =
-        !this.doc.isNew()
-        && this.links.length;
+      this.showNextAction = !this.doc.isNew() && this.links.length;
 
-      this.showPrint =
-        this.doc.submitted === 1
-        && this.meta.print
+      this.showPrint = this.doc.submitted === 1 && this.meta.print;
 
-      this.showSave =
-        this.doc.isNew() ?
-          true :
-            this.meta.isSubmittable ?
-              (this.isDirty ? true : false) :
-              true;
+      this.showSave = this.doc.isNew()
+        ? true
+        : this.meta.isSubmittable
+        ? this.isDirty
+          ? true
+          : false
+        : true;
 
-      this.disableSave =
-        this.doc.isNew() ? false : !this.isDirty;
+      this.disableSave = this.doc.isNew() ? false : !this.isDirty;
     }
   },
   computed: {
@@ -84,12 +85,12 @@ export default {
       const _ = this._;
 
       if (this.doc.isNew()) {
-        return _('New {0}', _(this.doc.doctype));
+        return _('New {0}', _(this.meta.label || this.doc.doctype));
       }
 
       const titleField = this.meta.titleField || 'name';
       return this.doc[titleField];
     }
   }
-}
+};
 </script>
diff --git a/ui/components/Form/FormLayout.vue b/ui/components/Form/FormLayout.vue
index 0a1d1651..35b23f30 100644
--- a/ui/components/Form/FormLayout.vue
+++ b/ui/components/Form/FormLayout.vue
@@ -2,19 +2,19 @@
   <form :class="['frappe-form-layout', { 'was-validated': invalid }]">
     <div
       class="form-row"
-      v-if="layoutConfig"
+      v-if="layoutConfig && showSection(i)"
       v-for="(section, i) in layoutConfig.sections"
       :key="i"
-      v-show="showSection(i)"
     >
       <div class="col" v-for="(column, j) in section.columns" :key="j">
         <frappe-control
-          v-for="fieldname in column.fields"
+          v-for="(fieldname, k) in column.fields"
           v-if="shouldRenderField(fieldname)"
-          :key="fieldname"
+          :key="k"
           :docfield="getDocField(fieldname)"
           :value="$data[fieldname]"
           :doc="doc"
+          :autofocus="doc.isNew() && (i === currentSection || i === 0) && j === 0 && k === 0"
           @change="value => updateDoc(fieldname, value)"
         />
       </div>
diff --git a/ui/components/controls/Table.vue b/ui/components/controls/Table.vue
index 7c50fd74..f6bf8127 100644
--- a/ui/components/controls/Table.vue
+++ b/ui/components/controls/Table.vue
@@ -69,7 +69,7 @@
     </table>
     <div class="table-actions" v-if="!disabled">
       <f-button danger @click="removeCheckedRows" v-if="checkedRows.length">Remove</f-button>
-      <f-button light @click="addRow" v-if="!checkedRows.length">Add Row</f-button>
+      <f-button secondary @click="addRow" v-if="!checkedRows.length">Add Row</f-button>
     </div>
   </div>
 </template>
@@ -100,7 +100,11 @@ export default {
       const { index, fieldname } = this.currentlyFocused;
       if (this.isEditing(index, fieldname)) {
         // FIX: enter pressing on a cell with a value throws error.
-        // this.deactivateEditing();
+        // Problem: input gets undefined on deactivating
+        setTimeout(() => {
+          this.deactivateEditing();
+        }, 300);
+
         this.activateFocus(index, fieldname);
       } else {
         this.activateEditing(index, fieldname);