datagrid, query - solved focus, active tab

packages/web/src/TabContent.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+
   export let tabid;
   export let tabVisible;
   export let tabComponent;
+
+  const tabVisibleStore = writable(tabVisible);
+  setContext('tabid', tabid);
+  setContext('tabVisible', tabVisibleStore);
+
+  $: tabVisibleStore.set(tabVisible);
 </script>
 
 <div class:tabVisible>

packages/web/src/datagrid/DataGridCore.svelte

@@ -1,5 +1,8 @@
 <script lang="ts" context="module">
-  const currentDataGrid = writable(null);
+  const lastFocusedDataGrid = writable(null);
+  const currentDataGrid = derived([lastFocusedDataGrid, activeTabId], ([grid, tabid]) =>
+    grid?.getTabId() == tabid ? grid : null
+  );
 
   const currentDataGridChangeSet = memberStore(currentDataGrid, grid => grid?.getChangeSetStore() || nullStore);
 
@@ -134,6 +137,7 @@
 <script lang="ts">
   import { changeSetContainsChanges, GridDisplay } from 'dbgate-datalib';
   import { get_current_component } from 'svelte/internal';
+  import { getContext } from 'svelte';
   import _ from 'lodash';
   import { writable, get, derived } from 'svelte/store';
   import registerCommand from '../commands/registerCommand';
@@ -159,7 +163,7 @@
   import DataFilterControl from './DataFilterControl.svelte';
   import createReducer from '../utility/createReducer';
   import keycodes from '../utility/keycodes';
-  import { nullStore } from '../stores';
+  import { activeTabId, nullStore } from '../stores';
   import memberStore from '../utility/memberStore';
   import axios from '../utility/axios';
   import { copyTextToClipboard } from '../utility/clipboard';
@@ -182,6 +186,8 @@
 
   const wheelRowCount = 5;
   const instance = get_current_component();
+  const tabid = getContext('tabid');
+  const tabVisible: any = getContext('tabVisible');
 
   let containerHeight = 0;
   let containerWidth = 0;
@@ -204,6 +210,10 @@
     display.reload();
   }
 
+  export function getTabId() {
+    return tabid;
+  }
+
   export function save() {
     if (onSave) onSave();
   }
@@ -372,6 +382,10 @@
     }
   }
 
+  $: if ($tabVisible && domFocusField) {
+    domFocusField.focus();
+  }
+
   function scrollIntoView(cell) {
     const [row, col] = cell;
 
@@ -820,7 +834,7 @@
     bind:this={domFocusField}
     on:keydown={handleGridKeyDown}
     on:focus={() => {
-      currentDataGrid.set(instance);
+      lastFocusedDataGrid.set(instance);
     }}
     on:paste={handlePaste}
   />

packages/web/src/tabs/QueryTab.svelte

@@ -1,5 +1,8 @@
 <script lang="ts" context="module">
-  const currentQuery = writable(null);
+  const lastFocusedQuery = writable(null);
+  const currentQuery = derived([lastFocusedQuery, activeTabId], ([query, tabid]) =>
+    query?.getTabId() == tabid ? query : null
+  );
   const currentQueryStatus = memberStore(currentQuery, query => query?.getStatus() || nullStore);
 
   registerCommand({
@@ -31,7 +34,7 @@
 
 <script lang="ts">
   import { get_current_component } from 'svelte/internal';
-  import { onDestroy } from 'svelte';
+  import { getContext } from 'svelte';
 
   import { writable, derived, get } from 'svelte/store';
   import registerCommand from '../commands/registerCommand';
@@ -39,7 +42,7 @@
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
   import useEditorData from '../query/useEditorData';
-  import { extensions, nullStore } from '../stores';
+  import { activeTabId, extensions, nullStore } from '../stores';
   import applySqlTemplate from '../utility/applySqlTemplate';
   import axios from '../utility/axios';
   import { changeTab } from '../utility/common';
@@ -56,6 +59,7 @@
   export let initialArgs;
 
   const instance = get_current_component();
+  const tabVisible: any = getContext('tabVisible');
 
   let busy = false;
   let executeNumber = 0;
@@ -96,6 +100,14 @@
     });
   }
 
+  $: if ($tabVisible && domEditor) {
+    domEditor?.getEditor()?.focus();
+  }
+
+  export function getTabId() {
+    return tabid;
+  }
+
   export async function execute() {
     if (busy) return;
     executeNumber++;
@@ -159,7 +171,7 @@
       engine={$connection && $connection.engine}
       value={$editorState.value || ''}
       on:input={e => setEditorData(e.detail)}
-      on:focus={() => currentQuery.set(instance)}
+      on:focus={() => lastFocusedQuery.set(instance)}
       bind:this={domEditor}
     />
   </svelte:fragment>