handle tab focus

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -699,7 +699,10 @@
     );
   }
 
-  export function handleDatabaseObjectClick(data, { forceNewTab = false, tabPreviewMode = false } = {}) {
+  export function handleDatabaseObjectClick(
+    data,
+    { forceNewTab = false, tabPreviewMode = false, focusTab = false } = {}
+  ) {
     const { schemaName, pureName, conid, database, objectTypeField } = data;
     const driver = findEngineDriver(data, getExtensions());
 
@@ -708,6 +711,15 @@
     const activeDefaultActionId = activeTab?.props?.defaultActionId;
 
     if (matchDatabaseObjectAppObject(data, activeTabProps)) {
+      if (!tabPreviewMode) {
+        openedTabs.update(tabs => {
+          return tabs.map(tab => ({
+            ...tab,
+            tabPreviewMode: tab.tabid == activeTab.tabid ? false : tab.tabPreviewMode,
+            focused: focusTab && tab.tabid == activeTab.tabid ? true : tab.focused,
+          }));
+        });
+      }
       return;
     }
 
@@ -851,6 +863,7 @@
     getCurrentSettings,
     getExtensions,
     openedConnections,
+    openedTabs,
     pinnedTables,
     selectedDatabaseObjectAppObject,
   } from '../stores';
@@ -886,9 +899,9 @@
   export let data;
   export let passProps;
 
-  function handleClick({ forceNewTab = false, tabPreviewMode = false } = {}) {
+  function handleClick({ forceNewTab = false, tabPreviewMode = false, focusTab = false } = {}) {
     $selectedDatabaseObjectAppObject = _.pick(data, ['conid', 'database', 'objectTypeField', 'pureName', 'schemaName']);
-    handleDatabaseObjectClick(data, { forceNewTab, tabPreviewMode });
+    handleDatabaseObjectClick(data, { forceNewTab, tabPreviewMode, focusTab });
   }
 
   function createMenu() {
@@ -924,7 +937,7 @@
   isChoosed={matchDatabaseObjectAppObject($selectedDatabaseObjectAppObject, data)}
   on:click={() => handleClick({ tabPreviewMode: true })}
   on:middleclick={() => handleClick({ forceNewTab: true })}
-  on:dblclick={() => handleClick({ tabPreviewMode: false })}
+  on:dblclick={() => handleClick({ tabPreviewMode: false, focusTab: true })}
   on:expand
   on:dragstart
   on:dragenter

packages/web/src/datagrid/DataGridCore.svelte

@@ -472,7 +472,7 @@
   export let dataEditorTypesBehaviourOverride = null;
 
   const wheelRowCount = 5;
-  const tabVisible: any = getContext('tabVisible');
+  const tabFocused: any = getContext('tabFocused');
 
   let containerHeight = 0;
   let containerWidth = 0;
@@ -1135,7 +1135,7 @@
     }
   }
 
-  $: if ($tabVisible && domFocusField && focusOnVisible) {
+  $: if ($tabFocused && domFocusField && focusOnVisible) {
     domFocusField.focus();
   }
 

packages/web/src/stores.ts

@@ -23,6 +23,7 @@ export interface TabDefinition {
   multiTabIndex?: number;
   unsaved?: boolean;
   tabPreviewMode?: boolean;
+  focused?: boolean;
 }
 
 export function writableWithStorage<T>(defaultValue: T, storageName) {
@@ -328,4 +329,4 @@ let selectedDatabaseObjectAppObjectValue = null;
 selectedDatabaseObjectAppObject.subscribe(value => {
   selectedDatabaseObjectAppObjectValue = value;
 });
-export const getSelectedDatabaseObjectAppObject = () => selectedDatabaseObjectAppObjectValue;
+export const getSelectedDatabaseObjectAppObject = () => selectedDatabaseObjectAppObjectValue;

packages/web/src/tabpanel/TabContent.svelte

@@ -4,17 +4,22 @@
 
   export let tabid;
   export let tabVisible;
+  export let tabFocused;
   export let tabComponent;
 
-  const tabVisibleStore = writable(tabVisible);
   setContext('tabid', tabid);
-  setContext('tabVisible', tabVisibleStore);
 
+  const tabVisibleStore = writable(tabVisible);
+  setContext('tabVisible', tabVisibleStore);
   $: tabVisibleStore.set(tabVisible);
+
+  const tabFocusedStore = writable(tabFocused);
+  setContext('tabFocused', tabFocusedStore);
+  $: tabFocusedStore.set(tabFocused);
 </script>
 
 <div class:tabVisible>
-  <svelte:component this={tabComponent} {...$$restProps} {tabid} {tabVisible} />
+  <svelte:component this={tabComponent} {...$$restProps} {tabid} {tabVisible} {tabFocused} />
 </div>
 
 <style>

packages/web/src/tabpanel/TabRegister.svelte

@@ -52,5 +52,6 @@
     {tabid}
     unsaved={openedTabsByTabId[tabid]?.unsaved}
     tabVisible={tabid == shownTab?.tabid}
+    tabFocused={tabid == shownTab?.tabid && shownTab?.focused}
   />
 {/each}

packages/web/src/tabpanel/TabsPanel.svelte

@@ -295,7 +295,7 @@
   import CloseTabModal from '../modals/CloseTabModal.svelte';
   import SwitchDatabaseModal from '../modals/SwitchDatabaseModal.svelte';
   import { getConnectionLabel } from 'dbgate-tools';
-  import { changeDatabaseByCurrentTab } from '../utility/changeCurrentDbByTab';
+  import { handleAfterTabClick } from '../utility/changeCurrentDbByTab';
 
   export let multiTabIndex;
   export let shownTab;
@@ -335,7 +335,7 @@
       return;
     }
     setSelectedTab(tabid);
-    changeDatabaseByCurrentTab();
+    handleAfterTabClick();
   };
 
   const handleMouseDown = (e, tabid) => {

packages/web/src/utility/changeCurrentDbByTab.ts

@@ -38,7 +38,7 @@ import { switchCurrentDatabase } from './common';
 //   }
 // });
 
-export async function changeDatabaseByCurrentTab() {
+export async function handleAfterTabClick() {
   const currentTab = getActiveTab();
   const { conid, database, objectTypeField, pureName, schemaName, defaultActionId } = currentTab?.props || {};
   const db = getCurrentDatabase();
@@ -67,6 +67,14 @@ export async function changeDatabaseByCurrentTab() {
       schemaName,
     });
   }
+
+  // focus current tab
+  openedTabs.update(tabs => {
+    return tabs.map(tab => ({
+      ...tab,
+      focused: !!tab.selected && !tab.closedTime,
+    }));
+  });
 }
 
 currentDatabase.subscribe(currentDb => {

packages/web/src/utility/common.ts

@@ -30,12 +30,23 @@ export function markTabSaved(tabid) {
   openedTabs.update(files => files.map(tab => (tab.tabid == tabid ? { ...tab, unsaved: false } : tab)));
 }
 
-export function setSelectedTabFunc(files, tabid, previewModeValue = undefined) {
+export function setSelectedTabFunc(files, tabid, additionalProps = {}) {
   return [
-    ...(files || []).filter(x => x.tabid != tabid).map(x => ({ ...x, selected: false })),
+    ...(files || [])
+      .filter(x => x.tabid != tabid)
+      .map(x => ({
+        ...x,
+        selected: false,
+        focused: false,
+      })),
     ...(files || [])
       .filter(x => x.tabid == tabid)
-      .map(x => ({ ...x, selected: true, tabPreviewMode: previewModeValue ?? x.tabPreviewMode })),
+      .map(x => ({
+        ...x,
+        selected: true,
+        focused: false,
+        ...additionalProps,
+      })),
   ];
 }
 

packages/web/src/utility/openNewTab.ts

@@ -50,7 +50,9 @@ export default async function openNewTab(newTab, initialData: any = undefined, o
   }
 
   if (existing) {
-    openedTabs.update(tabs => setSelectedTabFunc(tabs, existing.tabid, !tabPreviewMode ? false : undefined));
+    openedTabs.update(tabs =>
+      setSelectedTabFunc(tabs, existing.tabid, !tabPreviewMode ? { tabPreviewMode: false } : {})
+    );
     return;
   }