up and down arrows now work as vertical tab in row editor

resources/assets/js/components/RowsEditor.vue

@@ -102,8 +102,11 @@ Rows are identified by row._id, columns by col.id
               <td v-for="col in columns" class="pr-0">
                 <input v-model="row[col.id]" :class="['form-control', { 'is-invalid': row._errors && row._errors[col.id] }]"
                        :title="(row._errors && row._errors[col.id]) ? row._errors[col.id][0] : null"
+                       :ref="`edit-${row._id}-${col.id}`"
                        type="text"
                        @input="markRowDirty(row)"
+                       @keydown.down="verticalTab(row._id, col.id, 1)"
+                       @keydown.up="verticalTab(row._id, col.id, -1)"
                        @keyup.enter="toggleRowEditing(row._id)">
               </td>
             </template>
@@ -366,6 +369,49 @@ Rows are identified by row._id, columns by col.id
         _.each(this.rows, (row, id) => {
           this.$set(this.rows[id], '_editing', true)
         })
+      },
+
+      /**
+       * Move to next or prev editable cell vertically
+       *
+       * @param row_id
+       * @param col_id
+       * @param dir - +1 down, -1 up
+       */
+      verticalTab (row_id, col_id, dir) {
+        if (dir == -1) {
+          // up
+          let last_editable_row = null
+          for (let row of Object.values(this.rows)) {
+            if (row._id === row_id) {
+              break
+            }
+            if (row._editing || this.newRows) {
+              last_editable_row = row
+            }
+          }
+          if (last_editable_row) {
+            this.$refs[`edit-${last_editable_row._id}-${col_id}`][0].focus()
+          }
+        }
+        else {
+          // down
+          let first_editable_row = null
+          let foundself = false
+          for (let row of Object.values(this.rows)) {
+            if (row._id === row_id) {
+              foundself = true
+              continue
+            }
+            if (foundself && (row._editing || this.newRows)) {
+              first_editable_row = row
+              break
+            }
+          }
+          if (first_editable_row) {
+            this.$refs[`edit-${first_editable_row._id}-${col_id}`][0].focus()
+          }
+        }
       }
     },
   }