filterfocus

packages/web/src/datagrid/DataFilterControl.svelte

@@ -18,10 +18,16 @@
   export let filter;
   export let setFilter;
   export let showResizeSplitter = false;
+  export let onFocusGrid;
 
   let value;
   let isError;
   let isOk;
+  let domInput;
+
+  export function focus() {
+    domInput.focus();
+  }
 
   function openFilterWindow(condition1) {
     showModal(SetFilterModal, { condition1, filterType, onFilter: setFilter });
@@ -136,11 +142,11 @@
     if (ev.keyCode == keycodes.escape) {
       setFilter('');
     }
-    // if (ev.keyCode == keycodes.downArrow) {
+    if (ev.keyCode == keycodes.downArrow) {
-    //   if (onFocusGrid) onFocusGrid();
+      if (onFocusGrid) onFocusGrid();
-    //   // ev.stopPropagation();
+      // ev.stopPropagation();
-    //   ev.preventDefault();
+      ev.preventDefault();
-    // }
+    }
     // if (ev.keyCode == KeyCodes.DownArrow || ev.keyCode == KeyCodes.UpArrow) {
     //     if (this.props.onControlKey) this.props.onControlKey(ev.keyCode);
     // }
@@ -178,6 +184,7 @@
   }
 
   function applyFilter() {
+    if ((filter || '') == (value || '')) return;
     setFilter(value);
   }
 
@@ -193,6 +200,7 @@
     on:keydown={handleKeyDown}
     on:blur={applyFilter}
     on:paste={handlePaste}
+    bind:this={domInput}
     class:isError
     class:isOk
   />

packages/web/src/datagrid/DataGridCore.svelte

@@ -290,6 +290,7 @@
   let shiftDragStartCell = nullCell;
   let autofillDragStartCell = nullCell;
   let autofillSelectedCells = emptyCellArray;
+  const domFilterControls = {};
 
   export function refresh() {
     display.reload();
@@ -830,7 +831,7 @@
     } else {
       switch (event.keyCode) {
         case keycodes.upArrow:
-          // if (currentCell[0] == 0) return focusFilterEditor(currentCell[1]);
+          if (currentCell[0] == 0) return focusFilterEditor(currentCell[1]);
           return moveCurrentCell(currentCell[0] - 1, currentCell[1], event);
         case keycodes.downArrow:
         case keycodes.enter:
@@ -950,6 +951,17 @@
     }
   }
 
+  const selectTopmostCell = uniquePath => {
+    const modelIndex = columns.findIndex(x => x.uniquePath == uniquePath);
+    const realIndex = columnSizes.modelToReal(modelIndex);
+    let cell = [firstVisibleRowScrollIndex, realIndex];
+    // @ts-ignore
+    currentCell = cell;
+    // @ts-ignore
+    selectedCells = [cell];
+    domFocusField.focus();
+  };
+
   const [inplaceEditorState, dispatchInsplaceEditor] = createReducer((state, action) => {
     switch (action.type) {
       case 'show':
@@ -977,6 +989,13 @@
     return {};
   }, {});
 
+  function focusFilterEditor(columnRealIndex) {
+    let modelIndex = columnSizes.realToModel(columnRealIndex);
+    const domFilter = domFilterControls[columns[modelIndex].uniqueName];
+    if (domFilter) domFilter.focus();
+    return ['filter', columnRealIndex];
+  }
+
   function createMenu() {
     return [
       { command: 'dataGrid.refresh' },
@@ -1094,6 +1113,7 @@
                 style={`width:${col.width}px; min-width:${col.width}px; max-width:${col.width}px`}
               >
                 <DataFilterControl
+                  bind:this={domFilterControls[col.uniqueName]}
                   filterType={getFilterType(col.dataType)}
                   filter={display.getFilter(col.uniqueName)}
                   setFilter={value => display.setFilter(col.uniqueName, value)}
@@ -1102,6 +1122,9 @@
                     // @ts-ignore
                     display.resizeColumn(col.uniqueName, col.width, e.detail);
                   }}
+                  onFocusGrid={() => {
+                    selectTopmostCell(col.uniqueName);
+                  }}
                 />
               </td>
             {/each}