From 414a116f94fc52bab2f0b681d042a6238e97ca86 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Wed, 19 May 2021 22:50:56 +0200
Subject: [PATCH] Lost focus in SQL query editor #54

---
 .../Main/Editor/Tabs/Tab/SqlEditor/index.vue     |  8 +++++---
 src/views/Main/Editor/Tabs/Tab/index.vue         | 16 +++++++++-------
 tests/lib/utils/fileIo.spec.js                   |  2 +-
 tests/views/MainView/Editor/Tabs/Tab/Tab.spec.js |  1 +
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/views/Main/Editor/Tabs/Tab/SqlEditor/index.vue b/src/views/Main/Editor/Tabs/Tab/SqlEditor/index.vue
index 23721f4..6a28394 100644
--- a/src/views/Main/Editor/Tabs/Tab/SqlEditor/index.vue
+++ b/src/views/Main/Editor/Tabs/Tab/SqlEditor/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="codemirror-container">
-    <codemirror v-model="query" :options="cmOptions" @changes="onChange" />
+    <codemirror ref="cm" v-model="query" :options="cmOptions" @changes="onChange" />
   </div>
 </template>
 
@@ -28,7 +28,6 @@ export default {
         theme: 'neo',
         lineNumbers: true,
         line: true,
-        autofocus: true,
         autoRefresh: true,
         extraKeys: { 'Ctrl-Space': showHintOnDemand }
       }
@@ -40,7 +39,10 @@ export default {
     }
   },
   methods: {
-    onChange: debounce(showHint, 400)
+    onChange: debounce(showHint, 400),
+    focus () {
+      this.$refs.cm.codemirror.focus()
+    }
   }
 }
 </script>
diff --git a/src/views/Main/Editor/Tabs/Tab/index.vue b/src/views/Main/Editor/Tabs/Tab/index.vue
index c97efa9..8ff8ae9 100644
--- a/src/views/Main/Editor/Tabs/Tab/index.vue
+++ b/src/views/Main/Editor/Tabs/Tab/index.vue
@@ -8,7 +8,7 @@
     >
       <template #left-pane>
         <div class="query-editor">
-          <sql-editor v-model="query" />
+          <sql-editor ref="sqlEditor" v-model="query" />
         </div>
       </template>
       <template #right-pane>
@@ -86,9 +86,6 @@ export default {
       return this.id === this.$store.state.currentTabId
     }
   },
-  created () {
-    this.$store.commit('setCurrentTab', this)
-  },
   mounted () {
     this.resizeObserver = new ResizeObserver(this.handleResize)
     this.resizeObserver.observe(this.$refs.bottomPane)
@@ -98,9 +95,14 @@ export default {
     this.resizeObserver.unobserve(this.$refs.bottomPane)
   },
   watch: {
-    isActive () {
-      if (this.isActive) {
-        this.$store.commit('setCurrentTab', this)
+    isActive: {
+      immediate: true,
+      async handler () {
+        if (this.isActive) {
+          this.$store.commit('setCurrentTab', this)
+          await this.$nextTick()
+          this.$refs.sqlEditor.focus()
+        }
       }
     },
     query () {
diff --git a/tests/lib/utils/fileIo.spec.js b/tests/lib/utils/fileIo.spec.js
index 068e526..a14b7f5 100644
--- a/tests/lib/utils/fileIo.spec.js
+++ b/tests/lib/utils/fileIo.spec.js
@@ -112,7 +112,7 @@ describe('fileIo.js', () => {
 
     file = { type: 'application/x-sqlite3' }
     expect(fu.isDatabase(file)).to.equal(true)
-    
+
     file = { type: '', name: 'test.db' }
     expect(fu.isDatabase(file)).to.equal(true)
 
diff --git a/tests/views/MainView/Editor/Tabs/Tab/Tab.spec.js b/tests/views/MainView/Editor/Tabs/Tab/Tab.spec.js
index ebd2beb..e437f5a 100644
--- a/tests/views/MainView/Editor/Tabs/Tab/Tab.spec.js
+++ b/tests/views/MainView/Editor/Tabs/Tab/Tab.spec.js
@@ -115,6 +115,7 @@ describe('Tab.vue', () => {
     })
 
     state.currentTabId = 1
+    await wrapper.vm.$nextTick()
     expect(mutations.setCurrentTab.calledOnceWith(state, wrapper.vm)).to.equal(true)
   })