From b4545b178f795712c781a3f4fc35eec31b5ad902 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Sun, 9 Jan 2022 12:28:01 +0100
Subject: [PATCH] feat(UI): textarea autofocus selecting a query tab, closes
 #166

---
 src/renderer/components/Workspace.vue         | 17 ++++++-----------
 src/renderer/components/WorkspaceTabQuery.vue |  7 ++++++-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index 2f21ea2f..4f6a5e1d 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -18,7 +18,6 @@
             <li
                v-for="(tab, i) of draggableTabs"
                :key="i"
-               :ref="selectedTab === tab.uid ? 'tab-selected' : ''"
                class="tab-item tab-draggable"
                draggable="true"
                :class="{'active': selectedTab === tab.uid}"
@@ -568,7 +567,7 @@ export default {
          return this.workspace ? this.workspace.selectedTab : null;
       },
       queryTabs () {
-         return this.workspace.tabs.filter(tab => tab.type === 'query');
+         return this.workspace ? this.workspace.tabs.filter(tab => tab.type === 'query') : [];
       },
       schemaChild () {
          for (const key in this.workspace.breadcrumbs) {
@@ -584,16 +583,12 @@ export default {
       }
    },
    watch: {
-      selectedTab (newVal, oldVal) {
-         if (newVal !== oldVal) {
+      queryTabs: function (newVal, oldVal) {
+         if (newVal.length > oldVal.length) {
             setTimeout(() => {
-               const element = this.$refs['tab-selected'] ? this.$refs['tab-selected'][0] : null;
-               if (element) {
-                  element.setAttribute('tabindex', '-1');
-                  element.focus();
-                  element.removeAttribute('tabindex');
-               }
-            }, 50);
+               const scroller = this.$refs.tabWrap;
+               if (scroller) scroller.$el.scrollLeft = scroller.$el.scrollWidth;
+            }, 0);
          }
       }
    },
diff --git a/src/renderer/components/WorkspaceTabQuery.vue b/src/renderer/components/WorkspaceTabQuery.vue
index 98f48173..c7fed5e3 100644
--- a/src/renderer/components/WorkspaceTabQuery.vue
+++ b/src/renderer/components/WorkspaceTabQuery.vue
@@ -218,8 +218,13 @@ export default {
    },
    watch: {
       isSelected (val) {
-         if (val)
+         if (val) {
             this.changeBreadcrumbs({ schema: this.selectedSchema, query: `Query #${this.tab.index}` });
+            setTimeout(() => {
+               if (this.$refs.queryEditor)
+                  this.$refs.queryEditor.editor.focus();
+            }, 0);
+         }
       },
       selectedSchema () {
          this.changeBreadcrumbs({ schema: this.selectedSchema, query: `Query #${this.tab.index}` });