diff --git a/packages/web/src/datagrid/DataFilterControl.svelte b/packages/web/src/datagrid/DataFilterControl.svelte index 9ce5e1c3..33b1d88f 100644 --- a/packages/web/src/datagrid/DataFilterControl.svelte +++ b/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 (onFocusGrid) onFocusGrid(); - // // ev.stopPropagation(); - // ev.preventDefault(); - // } + if (ev.keyCode == keycodes.downArrow) { + if (onFocusGrid) onFocusGrid(); + // ev.stopPropagation(); + 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 /> diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte index 51307d60..8d019d28 100644 --- a/packages/web/src/datagrid/DataGridCore.svelte +++ b/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`} > display.setFilter(col.uniqueName, value)} @@ -1102,6 +1122,9 @@ // @ts-ignore display.resizeColumn(col.uniqueName, col.width, e.detail); }} + onFocusGrid={() => { + selectTopmostCell(col.uniqueName); + }} /> {/each}