diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte index ced78c0fe0..f38eb8d997 100644 --- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte +++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte @@ -134,12 +134,6 @@ case "Enter": focusCell() break - case " ": - case "Space": - if ($config.canDeleteRows) { - toggleSelectRow() - } - break default: startEnteringValue(e.key, e.which) } diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js index 6f7541e642..7b7dc1dee9 100644 --- a/packages/frontend-core/src/components/grid/stores/ui.js +++ b/packages/frontend-core/src/components/grid/stores/ui.js @@ -32,20 +32,6 @@ export const createStores = context => { null ) - // Toggles whether a certain row ID is selected or not - const toggleSelectedRow = id => { - selectedRows.update(state => { - let newState = { - ...state, - [id]: !state[id], - } - if (!newState[id]) { - delete newState[id] - } - return newState - }) - } - return { focusedCellId, focusedCellAPI, @@ -58,12 +44,7 @@ export const createStores = context => { keyboardBlocked, isDragging, buttonColumnWidth, - selectedRows: { - ...selectedRows, - actions: { - toggleRow: toggleSelectedRow, - }, - }, + selectedRows, } } @@ -112,7 +93,7 @@ export const deriveStores = context => { } export const createActions = context => { - const { focusedCellId, hoveredRowId } = context + const { focusedCellId, hoveredRowId, selectedRows } = context // Callback when leaving the grid, deselecting all focussed or selected items const blur = () => { @@ -120,12 +101,32 @@ export const createActions = context => { hoveredRowId.set(null) } + // Toggles whether a certain row ID is selected or not + const toggleSelectedRow = id => { + selectedRows.update(state => { + let newState = { + ...state, + [id]: !state[id], + } + if (!newState[id]) { + delete newState[id] + } + return newState + }) + } + return { ui: { actions: { blur, }, }, + selectedRows: { + ...selectedRows, + actions: { + toggleRow: toggleSelectedRow, + }, + }, } } @@ -186,18 +187,21 @@ export const initialise = context => { lastFocusedRowId = id }) - // Remember the last focused cell ID so that we can store the previous one let lastFocusedCellId = null focusedCellId.subscribe(id => { + // Remember the last focused cell ID so that we can store the previous one previousFocusedCellId.set(lastFocusedCellId) lastFocusedCellId = id - }) - // Remove hovered row when a cell is selected - focusedCellId.subscribe(cell => { - if (cell && get(hoveredRowId)) { + // Remove hovered row when a cell is selected + if (id && get(hoveredRowId)) { hoveredRowId.set(null) } + + // Clear row selection when focusing a cell + if (id && Object.keys(get(selectedRows)).length) { + selectedRows.set({}) + } }) // Pull row height from table as long as we don't have a fixed height @@ -215,4 +219,11 @@ export const initialise = context => { rowHeight.set(get(definition)?.rowHeight || DefaultRowHeight) } }) + + // Clear focused cell when selecting rows + selectedRows.subscribe(rows => { + if (get(focusedCellId) && Object.keys(rows).length) { + focusedCellId.set(null) + } + }) }