a hack to keep focus on the sort button

resources/assets/js/components/ColumnEditor.vue

@@ -18,9 +18,13 @@ Complex animated column editor for the table edit page
         </tr>
       </thead>
       <transition-group name="col-list" tag="tbody" ref="col-list">
-        <tr v-for="(col, i) in columns" :key="col.id" :ref="'col' + i" :class="{dragging: col._dragging}">
+        <tr v-for="(col, i) in columns" :key="col.id" :ref="`col${i}`" :class="{dragging: col._dragging}">
           <td class="btn-group" v-if="sortable">
-            <button type="button" class="btn btn-outline-secondary drag-btn" @mousedown="beginDrag(i, $event)">
+            <button type="button" class="btn btn-outline-secondary drag-btn"
+                    @keyup.up="move(i, -1)"
+                    @keyup.down="move(i, 1)"
+                    :ref="`col${i}-sort`"
+                    @mousedown="beginDrag(i, $event)">
               <v-icon class="fa-bars" alt="Drag" />
             </button><!--
          --><button type="button" :class="['btn', 'btn-outline-secondary', {disabled: i==0}]" v-if="manualSort"
@@ -208,6 +212,10 @@ export default {
       let col1 = columns.splice(pos1, 1)[0] // unwrap returned 1-element array
       columns.splice(pos2, 0, col1)
       this.columns = columns
+
+      // Put focus on the new field
+      // For some reason, it loses it when moving down
+      setTimeout(() => this.$refs[`col${pos2}-sort`][0].focus(), 0)
     },
 
     /** Indicate a column is dirty and needs saving */