From ef6e89bab687a23970c4971df53d0148f136a48d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Fri, 10 Aug 2018 09:16:24 +0200
Subject: [PATCH] a hack to keep focus on the sort button

---
 resources/assets/js/components/ColumnEditor.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/resources/assets/js/components/ColumnEditor.vue b/resources/assets/js/components/ColumnEditor.vue
index 4b049fe..d223409 100644
--- a/resources/assets/js/components/ColumnEditor.vue
+++ b/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 */