diff --git a/packages/web/src/datagrid/DataFilterControl.svelte b/packages/web/src/datagrid/DataFilterControl.svelte
index 33b1d88fc..cd907f82f 100644
--- a/packages/web/src/datagrid/DataFilterControl.svelte
+++ b/packages/web/src/datagrid/DataFilterControl.svelte
@@ -19,15 +19,14 @@
   export let setFilter;
   export let showResizeSplitter = false;
   export let onFocusGrid;
+  export let onGetReference;
 
   let value;
   let isError;
   let isOk;
   let domInput;
 
-  export function focus() {
-    domInput.focus();
-  }
+  $: if (onGetReference && domInput) onGetReference(domInput);
 
   function openFilterWindow(condition1) {
     showModal(SetFilterModal, { condition1, filterType, onFilter: setFilter });
@@ -193,6 +192,7 @@
 
 <div class="flex">
   <input
+    bind:this={domInput}
     type="text"
     autocomplete="off"
     readOnly={isReadOnly}
@@ -200,7 +200,6 @@
     on:keydown={handleKeyDown}
     on:blur={applyFilter}
     on:paste={handlePaste}
-    bind:this={domInput}
     class:isError
     class:isOk
   />
diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte
index 8d019d287..9647c13c5 100644
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/packages/web/src/datagrid/DataGridCore.svelte
@@ -290,7 +290,7 @@
   let shiftDragStartCell = nullCell;
   let autofillDragStartCell = nullCell;
   let autofillSelectedCells = emptyCellArray;
-  const domFilterControls = {};
+  const domFilterControlsRef = createRef({});
 
   export function refresh() {
     display.reload();
@@ -991,7 +991,7 @@
 
   function focusFilterEditor(columnRealIndex) {
     let modelIndex = columnSizes.realToModel(columnRealIndex);
-    const domFilter = domFilterControls[columns[modelIndex].uniqueName];
+    const domFilter = domFilterControlsRef.get()[columns[modelIndex].uniqueName];
     if (domFilter) domFilter.focus();
     return ['filter', columnRealIndex];
   }
@@ -1030,7 +1030,7 @@
 {:else if grider.errors && grider.errors.length > 0}
   <div>
     {#each grider.errors as err}
-      <ErrorInfo message={err} key={index} isSmall />
+      <ErrorInfo message={err} isSmall />
     {/each}
   </div>
 {:else}
@@ -1113,7 +1113,7 @@
                 style={`width:${col.width}px; min-width:${col.width}px; max-width:${col.width}px`}
               >
                 <DataFilterControl
-                  bind:this={domFilterControls[col.uniqueName]}
+                  onGetReference={value => (domFilterControlsRef.get()[col.uniqueName] = value)}
                   filterType={getFilterType(col.dataType)}
                   filter={display.getFilter(col.uniqueName)}
                   setFilter={value => display.setFilter(col.uniqueName, value)}