show focus in data grid

packages/web/src/datagrid/ColumnManager.svelte

@@ -142,6 +142,8 @@
       },
     });
   }
+
+  let isColumnManagerFocused = false;
 </script>
 
 {#if allowChangeChangeSetStructure}
@@ -207,9 +209,13 @@
     bind:this={domFocusField}
     on:keydown={handleKeyDown}
     on:focus={() => {
+      isColumnManagerFocused = true;
       // activator.activate();
       // invalidateCommands();
     }}
+    on:blur={() => {
+      isColumnManagerFocused = false;
+    }}
     on:copy={copyToClipboard}
   />
 
@@ -224,6 +230,7 @@
       {database}
       {tableInfo}
       {setTableInfo}
+      {isColumnManagerFocused}
       columnInfo={tableInfo?.columns?.[columnIndex]}
       {columnIndex}
       {allowChangeChangeSetStructure}

packages/web/src/datagrid/ColumnManagerRow.svelte

@@ -22,6 +22,8 @@
   export let columnInfo = null;
   export let columnIndex = -1;
 
+  export let isColumnManagerFocused = false;
+
   export let allowChangeChangeSetStructure = false;
   $: addDataCommand = allowChangeChangeSetStructure;
 
@@ -49,6 +51,7 @@
     else display.focusColumns([column.uniqueName]);
   }}
   class:isSelected
+  class:isFocused={isColumnManagerFocused}
   on:click
   on:mousedown
   on:mousemove
@@ -123,6 +126,10 @@
   }
 
   .row.isSelected {
+    background: var(--theme-bg-3);
+  }
+
+  .row.isSelected.isFocused {
     background: var(--theme-bg-selected);
   }
 

packages/web/src/datagrid/DataGridCell.svelte

@@ -173,6 +173,9 @@
     background: var(--theme-bg-volcano);
   }
   td.isSelected {
+    background: var(--theme-bg-3);
+  }
+  :global(.data-grid-focused) td.isSelected {
     background: var(--theme-bg-selected);
   }
   td.isDeleted {

packages/web/src/datagrid/DataGridCore.svelte

@@ -492,6 +492,8 @@
   let autofillSelectedCells = emptyCellArray;
   const domFilterControlsRef = createRef({});
 
+  let isGridFocused=false;
+
   const tabid = getContext('tabid');
 
   let unsubscribeDbRefresh;
@@ -1041,7 +1043,6 @@
     return !hideGridLeftColumn;
   }
 
-
   $: autofillMarkerCell =
     selectedCells && selectedCells.length > 0 && _.uniq(selectedCells.map(x => x[0])).length == 1
       ? [_.max(selectedCells.map(x => x[0])), _.max(selectedCells.map(x => x[1]))]
@@ -1863,6 +1864,7 @@
 {:else}
   <div
     class="container"
+    class:data-grid-focused={isGridFocused}
     bind:clientWidth={containerWidth}
     bind:clientHeight={containerHeight}
     use:contextMenu={buildMenu}
@@ -1877,10 +1879,14 @@
       on:focus={() => {
         activator.activate();
         invalidateCommands();
+        isGridFocused = true;
       }}
+      on:blur
       on:paste={handlePaste}
       on:copy={copyToClipboard}
-      on:blur={handleBlur}
+      on:blur={() => {
+        isGridFocused = false;
+      }}
     />
     <table
       class="table"