feat(UI): textarea autofocus selecting a query tab, closes #166

This commit is contained in:
Fabio Di Stasio 2022-01-09 12:28:01 +01:00
parent d9a3eab015
commit b4545b178f
2 changed files with 12 additions and 12 deletions

View File

@ -18,7 +18,6 @@
<li <li
v-for="(tab, i) of draggableTabs" v-for="(tab, i) of draggableTabs"
:key="i" :key="i"
:ref="selectedTab === tab.uid ? 'tab-selected' : ''"
class="tab-item tab-draggable" class="tab-item tab-draggable"
draggable="true" draggable="true"
:class="{'active': selectedTab === tab.uid}" :class="{'active': selectedTab === tab.uid}"
@ -568,7 +567,7 @@ export default {
return this.workspace ? this.workspace.selectedTab : null; return this.workspace ? this.workspace.selectedTab : null;
}, },
queryTabs () { queryTabs () {
return this.workspace.tabs.filter(tab => tab.type === 'query'); return this.workspace ? this.workspace.tabs.filter(tab => tab.type === 'query') : [];
}, },
schemaChild () { schemaChild () {
for (const key in this.workspace.breadcrumbs) { for (const key in this.workspace.breadcrumbs) {
@ -584,16 +583,12 @@ export default {
} }
}, },
watch: { watch: {
selectedTab (newVal, oldVal) { queryTabs: function (newVal, oldVal) {
if (newVal !== oldVal) { if (newVal.length > oldVal.length) {
setTimeout(() => { setTimeout(() => {
const element = this.$refs['tab-selected'] ? this.$refs['tab-selected'][0] : null; const scroller = this.$refs.tabWrap;
if (element) { if (scroller) scroller.$el.scrollLeft = scroller.$el.scrollWidth;
element.setAttribute('tabindex', '-1'); }, 0);
element.focus();
element.removeAttribute('tabindex');
}
}, 50);
} }
} }
}, },

View File

@ -218,8 +218,13 @@ export default {
}, },
watch: { watch: {
isSelected (val) { isSelected (val) {
if (val) if (val) {
this.changeBreadcrumbs({ schema: this.selectedSchema, query: `Query #${this.tab.index}` }); this.changeBreadcrumbs({ schema: this.selectedSchema, query: `Query #${this.tab.index}` });
setTimeout(() => {
if (this.$refs.queryEditor)
this.$refs.queryEditor.editor.focus();
}, 0);
}
}, },
selectedSchema () { selectedSchema () {
this.changeBreadcrumbs({ schema: this.selectedSchema, query: `Query #${this.tab.index}` }); this.changeBreadcrumbs({ schema: this.selectedSchema, query: `Query #${this.tab.index}` });